Asked  7 Months ago    Answers:  5   Viewed   126 times

I'm working on a website that uses gulp to compile and browser sync to keep the browser synchronised with my changes.

The gulp task compiles everything properly, but on the website, I'm unable to see any style, and the console shows this error message:

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

Now, I don't really understand why this happens.

The HTML includes the file like this (which I am pretty sure is correct):

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

And the stylesheet is a merge between Bootstrap & font-awesome styles for now (nothing custom yet).

The path is correct as well, as this is the folder structure:

index.html
assets
|-styles
  |-custom-style.css

But I keep getting the error.

What could it be? Is this something (maybe a setting?) for gulp/browsersync maybe?

 Answers

37

The issue, I think, was with a CSS library starting with comments.

While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.

Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.

Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.

Tuesday, June 1, 2021
 
nhunston
answered 7 Months ago
94

Adding following snippet into settings.py file may fix your problem:

import mimetypes
mimetypes.add_type("text/css", ".css", True)
Sunday, July 4, 2021
 
alioygur
answered 6 Months ago
98

Actually I had wrongly put href="", and hence the html file was referencing itself as the CSS. Mozilla had the similar bug once, and I got the answer from there.

Friday, July 30, 2021
 
nfechner
answered 5 Months ago
23

The primary problem with your configuration is that you're pointing to localhost in the gulpfile. This points to the local container, not your host machine, so browsersync won't be able to connect to Wordpress.

You first need to update the gulpfile to point to the wordpress service, on its internal port:

browserSync.init(files, {
    // The hostname is the name of your service in docker-compose.yml.
    // The port is what's defined in your Dockerfile.
    proxy: "wordpress:3000",
    notify: false,
    // Do not open browser on start
    open: false
})

Then you need to add a port mapping to expose the browsersync server from your node service. In your docker-compose.yml file:

node:
    ports:
        - "3000:3000"
        - "3001:3001"

You should now be able to access the browsersync proxy on localhost:3001.

P.S. In case you have more than one site serving in one ngninx docker container, you can edit nginx config file for specific site in /etc/nginx/conf.d/somesite.conf and add new line: listen: 3000;

Sunday, August 8, 2021
 
tpow
answered 4 Months ago
72

Try this:

<location path="~/Styles">
    <system.web>
      <authorization>
        <allow users="*"/>
      </authorization>
    </system.web>

Where Styles is the folder that contains style sheet. I solved it this way

Tuesday, November 2, 2021
 
Pegues
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share