Webpack 错误 - 你可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来处理这个文件

Question

我正在学习使用 Webpack 构建我的 React 项目。我已经配置了 webpack.config.js 来加载 CSS 文件。

webpack.config.js:

module.exports = {

  ...

  module: {
    rules: [

      {
        test: /\.css$/,
        exclude: /(node_modules)/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
        ],
      },
      {
        test: /\.scss$/,
        exclude: /(node_modules)/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
        ],
      },

     ...

    ],
  },
  
  ...

}

npm run build

出现这个问题

Module parse failed: Unexpected token (6:3) You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file. See
https://webpack.js.org/concepts#loaders |  * Copyright 2011-2020
Twitter, Inc. |  * Licensed under MIT
(https://github.com/twbs/bootstrap/blob/main/LICENSE)
>  */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;
.....  ```

我不知道该怎么办。谢谢。

Answer 1

不确定你为什么排除 node_modules 为什么你仍然从那里导入 css 这意味着只需删除 exclude: /(node_modules)/ 然后就可以了：

{
  test: /\.css$/,
  // exclude: /(node_modules)/, // Remove this 
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
  ],
},

Webpack 错误 - 你可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来处理这个文件

Webpack ERROR - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

reactjs

webpack

webpack-4