MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型
[英]MIME type ('text/html') is not a supported stylesheet MIME type
问题描述
I have tried almost every solution for the problem which includes.
我已经尝试了几乎所有解决问题的解决方案，其中包括。 giving type for <link rel="stylesheet" href="./style.css" /> use of app.use(express.static('public')) and many more but it seems I am not able to find a solution for this.为<link rel="stylesheet" href="./style.css" />使用app.use(express.static('public'))等等提供类型，但似乎我找不到解决方案为了这。
index.js :索引.js：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux'
import "./assets/styles/app.less";
import 'bootstrap/dist/js/bootstrap.js';
import App from './components/base/App';
import store from './store'
const provider =
<Provider store={store}>
<App />
</Provider>
render(provider, document.getElementById('my-app'))
index.html :索引.html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta charset=utf-8>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>XYZ</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="my-app"></div>
<script type='text/javascript' src="./bundle.js"></script>
</body>
</html>
webPack.config.js : webPack.config.js :
'use strict';
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const plugins = [
new CleanWebpackPlugin({
root: __dirname,
verbose: true,
dry: false
}),
new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
new MiniCssExtractPlugin({ filename: "style.css", allChunks: false }),
new CopyWebpackPlugin([
{ from: './src/index.html', to: 'index.html' },
]),
new webpack.ProvidePlugin({
Promise: 'es6-promise-promise',
'React': 'react'
}),
new HtmlWebpackPlugin({
template: './src/index.html'
})
];
module.exports = {
entry: ['@babel/polyfill', "./src/index.js"],
output: {
path: __dirname + '/dist',
filename: "bundle.js",
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
//load styles
{
test: /\.(sass|less|css)$/,
use: [
{ loader: 'style-loader' },
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader", options: {} },
{
loader: "postcss-loader",
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({
'browsers': ['> 1%', 'last 2 versions']
}),
]
}
},
{ loader: "less-loader", options: {} }
]
},
// Load images
{
test: /\.jpg/,
use: [{
loader: "url-loader",
options: {
limit: 10000,
mimetype: "image/jpg"
}
}]
},
{
test: /\.gif/,
use: [{
loader: "url-loader",
options: {
limit: 10000,
mimetype: "image/gif"
}
}]
},
{
test: /\.png/,
use: [{
loader: "url-loader",
options: {
limit: 10000,
mimetype: "image/png"
}
}]
},
// Load fonts
{
test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: "url-loader",
options: {
limit: 10000,
mimetype: "application/font-woff"
}
}]
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: "file-loader"
}]
},
{
test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: "url-loader",
options: {
limit: 10000,
mimetype: "application/font-woff"
}
}]
}
]
},
plugins: plugins,
resolve: {
extensions: ['.js', '.jsx', '.less', '.css'],
modules: ["src", "node_modules"]
},
devServer: {
compress: true,
disableHostCheck: true, // That solved it
}
}
package.json script tag : package.json 脚本标签：
"scripts": {
"start": "webpack-dev-server --content-base dist/ --port 9000 --config webpack.config.js --watch --progress --inline --hot --history-api-fallback --mode development",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
},
npm strat is working fine the application is working fine, but when i do npm run build it gives me the error: npm str 工作正常，应用程序工作正常，但是当我执行 npm run build 时，它给了我错误：
**Refused to apply style from 'http://localhost:9000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.**
**Refused to execute script from 'http://localhost:9000/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.**
In the network part I got the following:在网络部分，我得到以下信息：
Ok response for : http://localhost:9000/bundle.js
cancled for : http://localhost:9000/style.css
Help !!帮助 ！！
5 个解决方案
解决方案1
16 已采纳 2019-03-19 15:35:32
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.我认为 MIME 类型错误可能是由于 css 路径不正确。 I think it is trying to serve up an error instead of the css file which is not matching the MIME type.我认为它试图提供一个错误而不是与 MIME 类型不匹配的 css 文件。 Try removing the following line from your HTML Template and allowing the HtmlWebPackPlugin to inject it automatically.尝试从 HTML 模板中删除以下行并允许 HtmlWebPackPlugin 自动注入它。
<link rel="stylesheet" href="./style.css" />
Below is my own webpack.config and index.html template which I hope will help.下面是我自己的 webpack.config 和 index.html 模板，希望对您有所帮助。
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索引.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>
解决方案2
12 2019-07-25 19:56:22
您可以尝试添加 type 属性：
<link type="css" rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">
解决方案3
2 2019-03-19 14:42:13
I believe that the issue is due to the HtmlWebpackPlugin not providing the mimetype for the css file that has been injected with the MiniCssExtractPlugin.我相信这个问题是由于 HtmlWebpackPlugin 没有为注入 MiniCssExtractPlugin 的 css 文件提供 mimetype。 I've managed to solve the problem by using the HtmlWebpackLinkTypePlugin which should insert the mimetype into the css file.我设法通过使用HtmlWebpackLinkTypePlugin解决了这个问题，它应该将 mimetype 插入到 css 文件中。
/// top of file
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
....
const plugins = [
new CleanWebpackPlugin({
root: __dirname,
verbose: true,
dry: false
}),
new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
new MiniCssExtractPlugin({ filename: "style.css", allChunks: false }),
new CopyWebpackPlugin([
{ from: './src/index.html', to: 'index.html' },
]),
new webpack.ProvidePlugin({
Promise: 'es6-promise-promise',
'React': 'react'
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new LinkTypePlugin({
'*.css' : 'text/css'
})
];
This should make your injected stylesheet line look like this:这应该使您注入的样式表行看起来像这样：
<link rel="stylesheet" href="./style.css" type="text/css" />
Just a note that the *.css rule is a glob, so if your css file is hosted in a directory under your root, you will need to add something like **/*.css as your rule.请注意，*.css 规则是一个 glob，因此如果您的 css 文件托管在根目录下的目录中，您将需要添加类似 **/*.css 的内容作为您的规则。
I hope this answers your question.我希望这回答了你的问题。
解决方案4
0 2021-02-12 09:34:00
The problem in my case was the wrong path.我的问题是路径错误。
After running npm run build运行npm run build
React created static files, but in index.html was something like href="/static/css/main.39c237f9.chunk.css" so I added a dot at the beginning of the path, becoming href="./static/css/main.39c237f9.chunk.css . React 创建了静态文件，但在 index.html 中类似于href="/static/css/main.39c237f9.chunk.css"所以我在路径的开头添加了一个点，成为href="./static/css/main.39c237f9.chunk.css 。
解决方案5
0 2021-06-08 06:08:02
It seems to bug either in VSCode or live server extension它似乎在VSCode或live server扩展中VSCode
Changed existing style.css name to abc.css , the error is gone.将现有的style.css名称更改为abc.css ，错误消失了。
Not sure what's the problem.不知道是什么问题。
I remember there was a folder by name style.css created accidentally earlier which I've deleted我记得之前无意中创建了一个名为style.css的文件夹，我已将其删除
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.