javascript MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55178482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MIME type ('text/html') is not a supported stylesheet MIME type
提问by Raman Mishra
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
Ok response for : http://localhost:9000/bundle.js
cancled for : http://localhost:9000/style.css
cancled for : http://localhost:9000/style.css
Help !!
帮助 ！！
回答by Stuart Nichols
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.
我要添加第二个答案，因为我认为可能存在不同的问题。我认为 MIME 类型错误可能是由于 css 路径不正确。我认为它试图提供一个错误而不是与 MIME 类型不匹配的 css 文件。尝试从 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>
回答by Stuart Nichols
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. I've managed to solve the problem by using the HtmlWebpackLinkTypePluginwhich should insert the mimetype into the css file.
我相信这个问题是由于 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'
})
];
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.
我希望这回答了你的问题。
回答by ColemanTO
You could try adding the type property:
您可以尝试添加 type 属性：
<link type="css" rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">
