未应用CSS文件

Question

I'm trying to build a web-app using Buffalo but I'm having a difficult time figuring out why my site.css file is not being applied.

The error that I am getting on Chrome is:

Refused to apply style from 'http://localhost:3000/assets/css/site.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I've tried looking through the docs for how Buffalo manages assets, and it says:

Any assets placed in the /assets folder will be copied to the "distribution" automatically, and can be found at /assets/path/to/asset.

My code where I link the stylesheet looks like this:

<link rel="stylesheet" type="text/css" href="/assets/css/site.css" />

Any ideas as to what else I could be missing?

Thanks!

Answer 1

That means your server is not responding to requests for this css file with the appropriate MIME type. You can demonstrate that by requesting the CSS file and viewing the raw response (in your browser's developer tools, or via cURL, for example). What you want to see is:

text/css

But, given the error, what you will see is text/plain

According to Buffalo documentation:

By default the asset pipeline is configured to use .scss files, with /assets/css/application.scss as the main entry point. This, of course, can be changed.

I suggest you adopt the default scheme and use SCSS, and use the Buffalo asset helper:

stylesheetTag - This helper will generate a style tag for the requested CSS file. Example: <%= stylesheetTag("application.css") %> would return something like <link href="/assets/application.bd76587ded82386f388f.css" media="screen" rel="stylesheet" />

but if you don't wish to do that you could look into alternative configurations for serving CSS files with Buffalo, or into getting around Buffalo and serving CSS files without it.