加载CSS的相关配置

CSS相关的loader包含css-loader和style-loader。

其中css-loader主要是处理@import和url()，如果@import加载的是外部资源，那么就跳过，只处理本地资源。 而style-loader处理style标签。

安装

npm i css-loader style-loader --save-dev

配置

const config = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      ],
    },
  },
};

注意在module中配置的style-loader和css-loader的先后顺序，webpack在解析时，是从右到左解析的。

测试

在webpack配置的入口文件app/index.css中引入一个main.css文件。

// ...
import './main.css';

编写这个css文件，内容如下：

body {
    background-color: #eaeaea;
}

可以看到我们在main.css中编写的CSS样式代码被webpack编译成exports.push([module.i, "body {\n background-color: #eaeaea;\n}\n", ""]);，最终被写入到HTML的head中实现作用。