CODEWITHSUNDEEP
cssvue.js
Qwertie
Qwertie

Reputation: 6493

VueJS compiled app css doesn't work unless copied and pasted back in to the browser style editor

I compiled a vuejs app with npm run build and when viewing the result in firefox the CSS does not display. It does load in the network tab and it shows under the style editor but says "0 rules". Everything loads fine when running npm run serve in development.

enter image description here

If I copy the style text and paste it over itself the style loads properly

enter image description here

This is the HTML for my app

<!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>

What could be causing this and how can I fix it?

Upvotes: 0

Views: 718

Answers (1)

Qwertie
Qwertie

Reputation: 6493

Found out nginx was serving the css file with the content type text/plain instead of text/css. Adding include /etc/nginx/mime.types; to the location block fixed it.

Upvotes: 2

Related Questions