Webpack 4.6.0 加载 css 文件：您可能需要适当的加载器来处理此文件类型

Question

我一直在使用 webpack 4.6.0：

编译时遇到以下问题：

Uncaught Error: Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| div {
|     background-color: yellow;
|     color: red;

我的 webpck 配置如下：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  mode:'development',
  entry: './src/code/app.js',
  output: { path: __dirname, filename: 'bundle.js'},
  watch: true,

  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          plugins: "transform-class-properties",
          presets: ['es2015', 'react']
        }
      },
      {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        loader: 'css-loader'
      }
    ]
  }
};

我有：

"css-loader": "^0.28.11",

我的文件结构是这样的：

root:
-src
 |-code
   |-XXXX.js
 |-css
   |-HomePage.css

我认为这与我的css加载器有关，我在网上尝试了很多方法，但都没有奏效。有什么与我的文件结构有关的东西吗？

Answer 1

我相信您仍然需要为自己的css 文件添加规则。尝试将此添加到您的规则中。

{
  // Preprocess your css files
  // you can add additional loaders here (e.g. sass/less etc.)
  test: /\.css$/,
  exclude: /node_modules/,
  use: ['style-loader', 'css-loader'],
}