MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型
MIME type ('text/html') is not a supported stylesheet MIME type
我已经尝试了几乎所有解决问题的方法,其中包括。
为 <link rel="stylesheet" href="./style.css" />
使用 app.use(express.static('public'))
提供类型等等,但似乎我无法为此找到解决方案。
index.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 :
<!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 :
'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 脚本标签:
"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 工作正常应用程序工作正常,但是当我执行 npm 运行 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.**
在网络部分我得到了以下信息:
Ok response for : http://localhost:9000/bundle.js
cancled for : http://localhost:9000/style.css
求助!!
我认为问题是由于 HtmlWebpackPlugin 没有为已使用 MiniCssExtractPlugin 注入的 css 文件提供 mimetype。我设法通过使用 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'
})
];
这应该使您注入的样式表行看起来像这样:
<link rel="stylesheet" href="./style.css" type="text/css" />
请注意 *.css 规则是一个 glob,因此如果您的 css 文件托管在根目录下,您将需要添加类似 **/ *.css 作为你的规则。
我希望这能回答你的问题。
我添加了第二个答案,因为我认为可能存在不同的问题。我认为 MIME 类型错误可能是由于 css 路径不正确造成的。我认为它试图提供一个错误而不是 css 与 MIME 类型不匹配的文件。尝试从您的 HTML 模板中删除以下行并允许 HtmlWebPackPlugin 自动注入它。
<link rel="stylesheet" href="./style.css" />
下面是我自己的 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
<!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>
您可以尝试添加类型 属性:
<link type="css" rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">
我的问题是路径错误。
在运行之后npm run build
React 创建了静态文件,但在 index.html 中是类似 href="/static/css/main.39c237f9.chunk.css"
的东西,所以我在路径的开头添加了一个点,成为 href="./static/css/main.39c237f9.chunk.css
.
它似乎在 VSCode
或 live server
扩展
中出现错误
将现有的 style.css
名称更改为 abc.css
,错误消失了。
不确定是什么问题。
我记得之前不小心创建了一个名为 style.css
的文件夹,我已将其删除
我遇到了同样的问题。解决方案就是等待一段时间,因为有些托管服务提供商在您更新后会有延迟。
我已经尝试了几乎所有解决问题的方法,其中包括。
为 <link rel="stylesheet" href="./style.css" />
使用 app.use(express.static('public'))
提供类型等等,但似乎我无法为此找到解决方案。
index.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 :
<!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 :
'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 脚本标签:
"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 工作正常应用程序工作正常,但是当我执行 npm 运行 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.**
在网络部分我得到了以下信息:
Ok response for : http://localhost:9000/bundle.js
cancled for : http://localhost:9000/style.css
求助!!
我认为问题是由于 HtmlWebpackPlugin 没有为已使用 MiniCssExtractPlugin 注入的 css 文件提供 mimetype。我设法通过使用 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'
})
];
这应该使您注入的样式表行看起来像这样:
<link rel="stylesheet" href="./style.css" type="text/css" />
请注意 *.css 规则是一个 glob,因此如果您的 css 文件托管在根目录下,您将需要添加类似 **/ *.css 作为你的规则。
我希望这能回答你的问题。
我添加了第二个答案,因为我认为可能存在不同的问题。我认为 MIME 类型错误可能是由于 css 路径不正确造成的。我认为它试图提供一个错误而不是 css 与 MIME 类型不匹配的文件。尝试从您的 HTML 模板中删除以下行并允许 HtmlWebPackPlugin 自动注入它。
<link rel="stylesheet" href="./style.css" />
下面是我自己的 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
<!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>
您可以尝试添加类型 属性:
<link type="css" rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">
我的问题是路径错误。
在运行之后npm run build
React 创建了静态文件,但在 index.html 中是类似 href="/static/css/main.39c237f9.chunk.css"
的东西,所以我在路径的开头添加了一个点,成为 href="./static/css/main.39c237f9.chunk.css
.
它似乎在 VSCode
或 live server
扩展
将现有的 style.css
名称更改为 abc.css
,错误消失了。
不确定是什么问题。
我记得之前不小心创建了一个名为 style.css
的文件夹,我已将其删除
我遇到了同样的问题。解决方案就是等待一段时间,因为有些托管服务提供商在您更新后会有延迟。