After compiling my vuejs app with npm run build, I noticed that the CSS does not display when viewing it in Firefox. Surprisingly, the styles do load in the network tab and appear under the style editor, but with "0 rules". However, everything displays fine when using npm run serve during development.
https://i.sstatic.net/BG0rQ.png
A peculiar workaround I discovered is that copying the style text and pasting it over itself seems to make the style load properly.
https://i.sstatic.net/k6i28.png
This is the HTML code for my application:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>frontend</title>
<link as=style href=/css/app.36bb3a4e.css rel=preload>
<link as=style href=/css/chunk-vendors.baa7246e.css rel=preload>
<link as=script href=/js/app.fcf42d91.js rel=preload>
<link as=script href=/js/chunk-vendors.ea5cf647.js rel=preload>
<link href=/css/app.36bb3a4e.css rel=stylesheet>
<link href=/css/chunk-vendors.baa7246e.css rel=stylesheet>
</head>
<body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/app.fcf42d91.js></script>
<script src=/js/chunk-vendors.ea5cf647.js></script>
</body>
</html>
I am puzzled about what could be causing this issue and how I can resolve it. Any insights or suggestions are welcome!