Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 803
Troy Leu Avatar asked Jul 11 '18 05:07

Troy Leu


People also ask

How do I fix MIME type error?

To Solve MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled ErrorJust make Sure Your File name and the name You are Using in Link Tag Both Are Same. For Example my File name is style.

What is MIME type in CSS?

A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.


1 Answers

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
         })
    ]
}
like image 164
Troy Leu Avatar answered Oct 11 '22 00:10

Troy Leu