Question

我遵循了一个教程，因为我从未尝试过webpack，并且想掌握它的工作原理，以及如何在没有经典的 create-react-app 的情况下构建小型React应用程序很好，直到我开始添加样式并且应用程序崩溃给出此错误：

./source/styles/index.css中的
ERROR 2：0模块解析失败：意外的令牌（2：0）您可能需要适当的加载程序来处理此文件类型，当前未配置任何加载程序来处理此文件。

这是我拥有webpack.config文件的方式：

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
require('dotenv').config()


module.exports = {

    entry: './source/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    devServer: {
        port: process.env.DEVPORT
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './source/index.html'
        })
    ]

}

因此我将其添加到Rules数组中：

{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ]
}

仍然是相同的错误。（我已经安装了dependecy）

我已经检查了css导入，这很好。我该如何解决？我搜索了一下，似乎在webpack中有这么多的解决方案和css插件，但是我不确定应该使用哪个，或者它是否可以与我的配置一起使用。

如何在React应用的Webpack配置中包含CSS？

0 个答案: