Refusing to apply styles because MIME type

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

1 answer

  • answered 2018-07-12 00:05 Troy Leu

    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
             })
        ]
    }