Mime Type ('Text/HTML') Is Not a Supported Stylesheet

Stylesheet not loaded because of MIME type

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.

MIME type ('text/html') is not a supported stylesheet MIME type

I'm adding a second answer because I think there could be a different issue. I think the MIME Type error could be due to the css path not being correct. I think it is trying to serve up an error instead of the css file which is not matching the MIME type. Try removing the following line from your HTML Template and allowing the HtmlWebPackPlugin to inject it automatically.

<link rel="stylesheet" href="./style.css" />

Below is my own webpack.config and index.html template which I hope will help.

webpack.config

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'app/main.js'
    },
    devServer: {
        contentBase: './',
        watchContentBase: true
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {

                        }
                    },
                    "css-loader",
                    "resolve-url-loader",
                    {
                        loader: "sass-loader?sourceMap",
                        options: {
                            includePaths: [
                            ],
                            sourceMap: true
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: /node_modules/
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    publicPath: "./",
                    outputPath: "app"
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './app/style.css',
        }),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new LinkTypePlugin({
            '**/*.css' : 'text/css'
        }),
        new CopyPlugin([
            { from: 'assets', to: 'assets' }
        ])
    ]
};

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="home_container">
</body>

</html>

MIME type ('text/html') is not a supported stylesheet

It's because of relative path that your html is unable to find the correct css. With express files served as static is relative to express route path not actual folder path.

Since everything inside your public folder is served as static, use absolute path, makes things easier:

<link rel="stylesheet" href="/style/draft.css" />

Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled in Angular

When Angular bundles your application for serving, it does not know, that it needs to include your css file (and it probably falls back to index.html, when it cannot find the file in the path indicated - that's the error with the incorrect MIME type, because index.html does not have the correct type for a stylesheet).

Try to add the path to the css file in angular.json - in the styles section (projects -> $project name$ -> architect -> build -> options -> styles).

Django: Refused to apply style from ... because its MIME type ('text/html') is not a supported stylesheet MIME type

all i did was add this line in my base.html head section

<head>
     ...
     <base href="{% static '/' %}">
</head>