拒绝应用样式，因为MIME类型

Question

我正在处理一个React应用程序，该应用程序运行在来自npm的webpack-dev-server上。在运行服务器时，我注意到我在浏览器控制台中得到以下消息：

"拒绝应用'http://localhost:8080/css/index.css'的样式，因为它的MIME类型（'text/html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。"

除了名为style的自定义css文件之外，我能够获取以下所有资源。css。当我直接从包含的文件夹运行应用程序时（不在本地服务器上运行），样式。css文件加载没有问题。

我需要使用带有网页包的css加载器吗？

我已经审阅了以下帖子，并尝试了所有建议，但均无效：

样式表未加载，因为MIME类型

index.html我使用以下格式的链接标签：

  <link rel="stylesheet" type="text/css" href="css/style.css"

这是我的网页包。配置。js文件：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
        template: './src/index.html', //source
        filename: 'index.html'  //destination
        })
    ]
}

这是我的项目目录结构：

>

src

>

组件

css

• style.css

任何帮助都将不胜感激

Answer 1

因此，我需要利用样式加载器和css加载器。我怀疑这个问题完全是webpack-dev-server的问题，以及它是如何引用样式表的。我正在利用webpack 4，以防它在未来帮助任何人。

我的网页包。配置。js现在看起来像这样：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
         //will automatically inject bundle js into ./dist/index.html
         new HTMLWebpackPlugin({
             template: './src/index.html', //source
             filename: 'index.html'  //destination
         })
    ]
}