一、CSS

   css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。

1. 安装

    npm i style-loader css-loader -D
    npm i mini-css-extract-plugin -D
    npm i postcss postcss-loader postcss-preset-env -D // Css兼容性处理

2. 配置

    const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 将css单独打包
    module.exports = {
      module: {
        rules: [
          {
            test: /.css$/i, // 匹配后缀为css的文件进行处理
            use: [ // loader执行顺序：从右到左（从下到上）
                MiniCssExtractPlugin.loader, // "style-loader", // 将js中的css通过创建style标签的方式添加到html中
                "css-loader", // 将css资源编译为commonJs的模块到js中
                {
                    loader: "postcss-loader",
                    options: {
                        postcssOptions: {
                            plugins: [
                                'postcss-preset-env'
                            ]
                        }
                    }
                }
            ]
          }
        ]
      },
      plugins: [
          new MiniCssExtractPlugin({
            filename: '命名'
          })
      ]
    };

二、Less

   webpack 将 Less 编译为 CSS 的 loader。

1. 安装

    npm i less less-loader -D

2. 配置

    module.exports = {
      module: {
        rules: [
          {
            test: /.less$/i,
            use: [
              MiniCssExtractPlugin.loader, // 'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
        ],
      },
    };

三、 SASS|SCSS

   将 sass-loader 、css-loader 与 style-loader 进行链式调用，可以将样式以 style 标签的形式插入 DOM 中。

1. 安装

    npm i sass sass-loader -D

2. 配置

    module.exports = {
      module: {
        rules: [
          {
            test: /.s[ac]ss$/i,
            use: [
              MiniCssExtractPlugin.loader, //'style-loader',
              'css-loader',
              'sass-loader',
            ],
          },
        ],
      },
    };

四、Stylus

   一个 webpack 的 Stylus loader。将 Stylus 文件编译为 CSS

1. 安装

    npm i stylus stylus-loader -D

2. 配置

    module.exports = {
      module: {
        rules: [
          {
            test: /.styl$/,
            use: [
              MiniCssExtractPlugin.loader, // 'style-loader',
              'css-loader',
              "stylus-loader", // 将 Stylus 文件编译为 CSS
            ]
          }
        ],
      },
    };