Refusing to apply styles because MIME type

Question

I am working on a React application that is running on the webpack-dev-server from npm. Upon running the server, I notice that I get the following message in the browser console:

"Refused to apply style from 'http://localhost:8080/css/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

I am able to fetch all of the following resources except the custom css file titled style.css. When I run application directly from the containing folder(without running on the local server), the style.css file loads without a problem.

Do I need utilize a css loader with webpack?

I already have reviewed the following post and have tried all the suggestions, but to no avail:

Stylesheet not loaded because of MIME-type

In index.html I use a link tag with the following format:

  <link rel="stylesheet" type="text/css" href="css/style.css"

Here is my webpack.config.js file:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
        template: './src/index.html', //source
        filename: 'index.html'  //destination
        })
    ]
}

Here is my project directory structure:

src
- components
- css
  - style.css
- index.html
- index.js

Any help would be appreciated

are you using an css or style loaders in your webpack.config.js ? possible duplicate of https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type?noredirect=1&lq=1 — Subhanshu, Jul 11 '18 at 05:41
At the moment I am only using a regular css file. No css loaders yet, as I am not directly importing css styles into my components — Troy Leu, Jul 11 '18 at 06:05
have you seen and tried the link which i provided. ? If it dosen't solve then it must be becuase of not using Style and CSS loaders ! — Subhanshu, Jul 11 '18 at 06:13
I have a hunch Subanshu is correct. What is the response you get when requesting the CSS file? You can see this under the Network tab of your developer console and selecting the preview of the file. It may be a 404 response produced by the Webpack development server. — DevNebulae, Jul 11 '18 at 06:39

score 5 · Accepted Answer · answered Jul 12 '18 at 00:05

So it turns out that I needed to utilize the style-loader and css-loader. I suspect that the issue was entirely with webpack-dev-server and how it was referencing the stylesheet. I am utilizing webpack 4 in case it helps anyone in the future.

My webpack.config.js now looks like this:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
         //will automatically inject bundle js into ./dist/index.html
         new HTMLWebpackPlugin({
             template: './src/index.html', //source
             filename: 'index.html'  //destination
         })
    ]
}

Refusing to apply styles because MIME type

1 Answers1