javascript MIME类型('text/html')不是受支持的样式表MIME类型

9lowa7mx 于 2023-05-16 发布在 Java

关注(0)|答案(7)|浏览(287)

我已经尝试了几乎所有的解决问题的方法，其中包括。给类型为<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 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.**

在网络部分，我得到了以下内容：

Ok response for : http://localhost:9000/bundle.js
cancled for : http://localhost:9000/style.css

救命啊！！

JavaScript

来源：https://stackoverflow.com/questions/55178482/mime-type-text-html-is-not-a-supported-stylesheet-mime-type

7条答案

按热度按时间

2fjabf4q1#

我补充了第二个答案，因为我认为可能有不同的问题。我认为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>

赞(0）回复(0）举报 2023-05-16

pzfprimi2#

您可以尝试添加type属性：

<link type="css" rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">

赞(0）回复(0）举报 2023-05-16

iswrvxsc3#

我认为这个问题是由于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的规则。
我希望这能回答你的问题。

赞(0）回复(0）举报 2023-05-16

cunj1qz14#

我也有同样的问题。解决方案只是等待一段时间，因为一些托管服务提供商在更新后会有延迟。

赞(0）回复(0）举报 2023-05-16

pnwntuvh5#

我的问题是走错了路。
运行npm run build后
React创建了静态文件，但在index.html中，它类似于href="/static/css/main.39c237f9.chunk.css"，所以我在路径的开头添加了一个点，成为href="./static/css/main.39c237f9.chunk.css。

赞(0）回复(0）举报 2023-05-16

zpf6vheq6#

它似乎在VSCode或live server扩展中存在错误
将现有的style.css名称更改为abc.css，错误消失。
不知道是什么问题。
我记得有一个名为style.css的文件夹，我已经删除了之前意外创建的

赞(0）回复(0）举报 2023-05-16

j91ykkif7#

Vue.js与typescript应用程序。
过去有几个错误导致了你对我的错误：
1.在部署到新环境时忘记修改vue.config.js中的'publicPath'。
生成的所有css和js文件的文件路径仍然指向以前环境中的路径。
client-app/vue.config.js

module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "https://<yourUrlHere>" : "/",
chainWebpack: config => {

1.在.ts文件中留下注解行，并收到针对'app.<>. js'的错误。
这个文件保存了client-app/src/router/index.ts文件中的内容，我在那里留下了许多注解行。

赞(0）回复(0）举报 2023-05-16

我来回答

javascript MIME类型('text/html')不是受支持的样式表MIME类型

7条答案

webpack.config

index.html

相关问题

热门标签

最新问答