Webpack 处理 SCSS 的基本方法

1. 安装必要的依赖项

npm install --save-dev webpack sass-loader css-loader

2. 在 Webpack 配置文件中添加 loader

在 Webpack 配置文件的 module.rules 数组中添加以下 loader：

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

• style-loader：将编译后的 CSS 代码注入到 <style> 标签中。
• css-loader：将 CSS 代码转换成 CommonJS 模块。
• sass-loader：将 SCSS 代码转换成 CSS 代码。

3. 在 Webpack 配置文件中设置输出目录

在 Webpack 配置文件的 output 对象中，设置 path 属性为编译后的 CSS 文件的输出目录。

{
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "style.css"
  }
}

4. 在 Webpack 配置文件中设置入口文件

在 Webpack 配置文件的 entry 对象中，设置 main 属性为 SCSS 文件的入口文件。

{
  entry: {
    main: "./src/style.scss"
  }
}

5. 运行 Webpack

webpack

运行 Webpack 后，编译后的 CSS 文件将输出到指定的目录中。

使用 file-loader 输出 CSS 文件

如果不想将编译后的 CSS 代码注入到 <style> 标签中，而是在输出目录中生成一个单独的 CSS 文件，可以使用 file-loader。

{
  test: /\.scss$/,
  use: [
    {
      loader: "file-loader",
      options: {
        name: "style.css"
      }
    },
    {
      loader: "css-loader"
    },
    {
      loader: "sass-loader"
    }
  ]
}

使用 file-loader 时，需要在 Webpack 配置文件的 output 对象中设置 publicPath 属性为输出目录的公共路径。

{
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "style.css",
    publicPath: "/dist/"
  }
}

运行 Webpack 后，编译后的 CSS 文件将输出到指定的目录中，并且在 HTML 文件中引用该 CSS 文件时，需要使用 publicPath 属性指定的公共路径。