Stylesheet Not Loaded Because of Mime-Type

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.

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>

The stylesheet was not loaded because its MIME type, text/html is not text/css

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.

Stylesheet not loaded because of MIME-type Angular application

Looks like the href is wrong.

There is a good answer to a different question exactly like yours:

The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever...

The solution is to find the correct path and router configuration so that you get your plain CSS file / image / etc. when accessing that path.

In your case it's the css href.

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 from css-file-path because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Check permissions of the bundles directory (wwwroot/bundles). IIS user must be able to write to this folder. Also, usually the Event Viewer provides helpful details which can explain what went wrong.

Stylesheet Not Loaded Because of Mime-Type

Stylesheet not loaded because of MIME-type

Stylesheet not loaded because of MIME-type

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

webpack.config

index.html

The stylesheet was not loaded because its MIME type, text/html is not text/css

Stylesheet not loaded because of MIME-type Angular application

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

Refused to apply style from css-file-path because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Related Topics

Leave a reply