Webpack CSS 模块错误 如何正确加载 css

Question

Hey guys I'm trying to run this project using Webpack with the CSS loader but I keep getting this error:

ERROR in ./src/component/list-view/list-view.css 1:3
Module parse failed: Unexpected token (1: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
> h2 {
|     color: #ff0000;
| }

This is a plain JS project. My Webpack config looks like this:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const NodemonPlugin = require('nodemon-webpack-plugin');
require('file-loader')

module.exports = {
  mode: process.env.NODE_ENV || 'production',
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: ['file-loader'],
      },
      {
        test: /\.css$/i,
        use: ["style-loader"],
      }
    ],
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new NodemonPlugin()
  ]
};

Answer 1

Looks like you missed css-loader which is the key thing to process css file. Using only style-loader is not enough since style-loader is all about to inject your css to the document.

So install & add to the configuration file:

// install
// npm i -D css-loader

// Add it to the current css rule

{
  test: /\.css$/i,
  use: ["style-loader", "css-loader"],
}