MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled

support
1

Hello,

I’m running Hugo without a theme, I added my css files into /static/css/semantic/semantic.min.css
I get the following error:

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

I invoke it via <link type="text/css" rel="stylesheet" href="css/semantic/semantic.min.css">

Assuming this could be a rookie mistake and I’m missing something obvious. Help much appreciated.

2

What text editor do you use?

3

Atom https://atom.io/

4

Was thinking it may be related to file-encoding issues, but since you’re using Atom, nevermind.

Can you share your site code?

5

Sure, it’s a fresh new project so I can actually paste it here.

Let’s consider / the directory that Hugo created when I did a “Hugo new site”

drwx------  9 sergiupoenaru  staff  4096 Jan 15 18:23 .
drwx------  5 sergiupoenaru  staff  4096 Jan 15 13:31 ..
drwx------  2 sergiupoenaru  staff  4096 Jan 15 13:31 archetypes
-rw-------@ 1 sergiupoenaru  staff    85 Jan 17 14:14 config.toml
drwx------  2 sergiupoenaru  staff  4096 Jan 15 13:32 content
drwx------  2 sergiupoenaru  staff  4096 Jan 15 13:31 data
drwx------  3 sergiupoenaru  staff  4096 Jan 15 18:23 layouts
drwx------  4 sergiupoenaru  staff  4096 Jan 15 14:50 public
drwx------  2 sergiupoenaru  staff  4096 Jan 15 13:32 resources
drwx------  3 sergiupoenaru  staff  4096 Jan 15 18:25 static

Under /layouts

drwx------  3 sergiupoenaru  staff  4096 Jan 15 18:23 .
drwx------  9 sergiupoenaru  staff  4096 Jan 15 18:23 ..
-rw-------  1 sergiupoenaru  staff   175 Jan 17 14:14 index.html
drwx------  2 sergiupoenaru  staff  4096 Jan 15 18:23 partials

index.html

{{ partial "header.html" . }}

<body>

<main>

We provide services for engineers.

</main>
</body>

{{ partial "footer.html" . }}

/layouts/partials contain

drwx------  2 sergiupoenaru  staff  4096 Jan 15 18:23 .
drwx------  3 sergiupoenaru  staff  4096 Jan 15 18:23 ..
-r--------  0 sergiupoenaru  staff     0 Jan  1  1970 Icon?
-rw-------  1 sergiupoenaru  staff    36 Jan 17 14:14 footer.html
-rw-------  1 sergiupoenaru  staff   581 Jan 17 14:19 header.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Customer Service for Apparel eCommerce shops</title>
  <meta name="description" content="">
  <meta name="author" content="HKR Media">

  <link type="text/css" rel="stylesheet" href="css/main.css">
  <link type="text/css" rel="stylesheet" href="css/semantic/semantic.min.css">
  <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
  <script src="css/semantic/semantic.min.js"></script>

</head>

footer.html

<footer>
  footer
</footer>
</html>

The files that aren’t working properly are under /static/css/semantic/

drwx------@ 4 sergiupoenaru  staff    4096 Jan 17 14:08 .
drwx------  6 sergiupoenaru  staff    4096 Jan 17 14:08 ..
-rwx------@ 1 sergiupoenaru  staff      68 Oct 13 16:56 .versions
-r--------  0 sergiupoenaru  staff       0 Jan  1  1970 Icon?
-rwx------@ 1 sergiupoenaru  staff    1080 Oct 13 16:56 LICENSE
-rwx------@ 1 sergiupoenaru  staff     441 Oct 13 16:56 README.md
drwx------@ 2 sergiupoenaru  staff    4096 Jan 17 14:08 components
-rwx------@ 1 sergiupoenaru  staff     740 Jan 17 14:14 package.js
-rwx------@ 1 sergiupoenaru  staff     505 Oct 13 16:56 package.json
-rwx------@ 1 sergiupoenaru  staff  828900 Oct 13 16:56 semantic.css
-rwx------@ 1 sergiupoenaru  staff  736574 Oct 13 16:56 semantic.js
-rwx------@ 1 sergiupoenaru  staff  628513 Jan 17 14:18 semantic.min.css
-rwx------@ 1 sergiupoenaru  staff  275731 Jan 17 14:18 semantic.min.js
drwx------@ 3 sergiupoenaru  staff    4096 Jan 17 14:08 themes

I had a similar issue with /static/css/main.css which is my own css file until I simply renamed it from style.css to main.css (could have been a typo?)

Thanks so much for the willingness to help, I’d like to continue using Hugo vs. going back to raw .html :slight_smile:

6

What is this under static?

-r--------  0 sergiupoenaru  staff       0 Jan  1  1970 Icon?
7

It’s an ugly Icon? file that Mac’s create automatically under new folders, especially when using Google Drive.

8

Gotcha. What are the contents of semantic.min.css?

9 
 /*
 * # Semantic UI - 2.4.0
 * https://github.com/Semantic-Org/Semantic-UI
 * http://www.semantic-ui.com/
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
 * # Semantic UI 2.4.0 - Reset
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}input[type=email],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;-moz-appearance:none}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}/*!
 * # Semantic UI 2.4.0 - Site
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */body,html{height:100%}html{font-size:14px}body{margin:0;padding:0;overflow-x:hidden;min-width:320px;background:#fff;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.4285em;color:rgba(0,0,0,.87);font-smoothing:antialiased}h1,h2,h3,h4,h5{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;line-height:1.28571429em;margin:calc(2rem - .14285714em) 0 1rem;font-weight:700;padding:0}h1{min-height:1rem;font-size:2rem}h2{font-size:1.71428571rem}h3{font-size:1.28571429rem}h4{font-size:1.07142857rem}h5{font-size:1rem}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child{margin-bottom:0}p{margin:0 0 1em;line-height:1.4285em}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#4183c4;text-decoration:none}a:hover{color:#1e70bf;text-decoration:none}::-webkit-selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}::-moz-selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}::selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}input::-webkit-selection,textarea::-webkit-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::-moz-selection,textarea::-moz-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::selection,textarea::selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}body ::-webkit-scrollbar{-webkit-appearance:none;width:10px;height:10px}body ::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}body ::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:rgba(0,0,0,.25);-webkit-transition:color .2s ease;transition:color .2s ease}body ::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.15)}body ::-webkit-scrollbar-thumb:hover{background:rgba(128,135,139,.8)}body .ui.inverted::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}body .ui.inverted::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}body .ui.inverted::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}body .ui.inverted::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}/*!
 * # Semantic UI 2.4.0 - Button
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */.ui.button{cursor:pointer;display:inline-block;min-height:1em;outline:0;border:none;vertical-align:baseline;background:#e0e1e2 none;color:rgba(0,0,0,.6);font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;margin:0 .25em 0 0;padding:.78571429em 1.5em .78571429em;text-transform:none;text-

ETC

10

Hi,

Do you have other layouts defined as well (that use the same head partial)? (ie other than layouts/index.html)

I find that I usually get this error when the path to the css file returns 404. So, for example, trying to load a css file using a path relative to a content post.

tldr: try with a / in front of the css path in the head.

11

For some reason my Hugo is so broken that in order for the “Hugo server” to render the page, I have to hit save once more on each file, every time I open the server again.

Tried the /

I get this:

If I go to main.css and just save it once more, it works. I open, CMD+Save, that’s it.

I have a hunch that running Google Drive under /Volumes/Google Drive/ on a Mac is very problematic, so I’d rather test this out on my local hard drive and will come up with an update here for everybody.

12

Could it be an issue that your file permissions are all 700?

13

Are you serving the files with hugo or generating them and publishing them and then serving them from Google Drive?

FWIW, I run in to this often when using Go to serve files from a Linux like O/S and viewing them with Chrome. The go stdlib uses the operating system to determine the mime type and that can be problematic (see https://github.com/golang/go/issues/9156). Your screen shot seems to support that - check the network log for the response and you should see that the server is setting the type to text/plain instead of text/css. Letting us know how you’re serving will help us figure out a solution.

14

I’m running it with “Hugo server” and then on localhost:port.
Chrome says https://www.dropbox.com/s/6d0bnz8sqh3kh7t/Screenshot%202019-01-18%2015.08.31.png?dl=0

Safari says Failed to load resource: the server responded with a status of 404 (Not Found)

Again, could I have missed something?

Code (take note I haven’t started with /static/css rather /css/ directly):

Also, it doesn’t seem to be a permissions problem. I changed from 700 to 777. same.

15

Did you also try running it on local disk vs google drive ?

Also, can you throw your site up on GitHub or a similar service? We can clone it and that’ll tell you whether it’s a hugo related issue or something related to your environment.

16

Yes, I moved the files from /Volumes/Google Drove/ to my ~/ on the local drive, then change permissions to 777 and same thing.

17

I’m going to reinstall the whole thing again on local, without using Google Drive. Hunch is Google Drive’s path of /Volumes/* is what’s causing this.

I’ll keep everybody in the loop if I have a fix/answer.

1 Like
18

I got this problem when I use the ‘one dark’ css theme of highlight.js, it is solved when create a css file and copy all the contents to it.

19

Try this in the head <link href="{{ .Site.BaseURL }}css/css.css" rel="stylesheet">

20

Links to assets (like stylesheets) should be made portable by using the absURL or relURL functions, along with their language aware variants i.e. absLangURL and relLangURL (for multilingual projects).

Also this is an old topic so it needs to rest in peace.