css-loader 和 style-loader

• css-loader: 解析 css @import url() 等语法

• style-loader: 将 webpack 解析完之后的内容插入到 html 的 head 标签中

• 安装

npm i -D css-loader@4.3 style-loader@1.1

配置使用

const path = require("path");
module.exports = {
  mode: "development",
  devtool: "cheap-module-eval-source-map",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      // 处理样式规则
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        // 如果要设置 loader 的选项, 就不能用字符串, 要用对象的形式
        // use: [
        //     {
        //         loader: 'style-loader',
        //         options: {
        //             camelCase: true
        //         }
        //     }
        // ]
      },
    ],
  },
};

示例代码

• /src/index.js

const styles = require("./index.css");

const div = document.createElement("div");

div.innerText = "测试文字";

document.body.appendChild(div);

• /src/index.css

@import "test.css";

body {
  background: #000;
}

• /src/test.css

body {
  color: #f00;
}