css-loader

2024年08月05日

柏拉文

越努力，越幸运

一、认识

---

css-loader 处理CSS文件，使其可以在JS中被引用和加载。

二、语法

---

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
            "style-laoder",
            "css-loader"
        ],
      },
    ]
  },
};

三、配置

---

3.1 基础配置

css-loader: 处理CSS文件，使其可以在JS中被引用和加载。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
            "style-laoder",
            "css-loader"
        ],
      },
    ]
  },
};

3.2 模块化配置

css-loader: 处理CSS文件，使其可以在JS中被引用和加载。

• esModule: false: 禁用CSS文件的ES模块化，以便与CSS模块化兼容

• modules: { localIdentName: "[name]__[local]___[hash:base64:5]" }: 启用CSS模块化，并指定生成的类名格式。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
            "style-laoder",
            {
                loader: "css-loader",
                options: {
                    esModule: false,
                    modules: {
                        localIdentName: "[name]__[local]___[hash:base64:5]",
                    }
                },
            },
        ],
      },
    ]
  },
};