如何在Webpack5中配置CSS的SassLoader-css教程-PHP中文网

直接配 sass-loader 会报错，因为它只将 Sass 编译为 CSS 字符串，而 Webpack 默认不识别 CSS，必须链式配合 css-loader（解析 @import/url）和 style-loader（注入 head）或 MiniCssExtractPlugin.loader（提取文件）才能正常工作。

如何在webpack5中配置css的sassloader

为什么直接配 `sass-loader` 会报错

因为 sass-loader 只负责把 .scss 或 .sass 编译成 CSS 字符串，它不处理后续的 CSS 解析、注入或提取。Webpack 默认不认识 CSS，所以必须链式配合其他 loader 才能跑通。

常见错误信息：Module parse failed: Unexpected token 或 You may need an appropriate loader，本质就是缺少 css-loader 或 style-loader。

sass-loader → 把 Sass 源码转成 CSS 字符串
css-loader → 把 CSS 字符串转成 JS 模块（支持 @import、url() 等）
style-loader → 把 CSS 模块动态插入（开发用）
MiniCssExtractPlugin.loader → 把 CSS 提取成独立文件（生产用）

`sass-loader` 的最小可用配置（开发环境）

先装依赖：

npm install sass-loader sass css-loader style-loader -D

在 webpack.config.js 的 module.rules 中添加：

rules: [
  {
    test: /\.(scss|sass)$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
  }
]

注意顺序不能错：loader 执行方向是「从右到左」，也就是先 sass-loader，再 css-loader，最后 style-loader。

如果只写 use: ['sass-loader']，Webpack 会卡在 CSS 字符串无法解析这一步
如果漏掉 css-loader，@import 和图片路径（如 url(./img.png)）会失效
sass 包（Dart Sass）必须安装，否则 sass-loader 启动就报 Cannot find module 'sass'

生产环境要换掉 `style-loader`

打包时把样式内联进 JS 不利于缓存，也违反分离关注点原则。得用 mini-css-extract-plugin 提取成单独 CSS 文件。

SSL Certificate Monitor

检查一个或多个域名的 SSL/TLS 证书到期时间、颁发者、协议及 SAN 信息，用于应要求检查证书、监控到期或验证 HTTPS 等场景。

下载

安装插件：

npm install mini-css-extract-plugin -D

配置片段（需同时改 plugins 和 rules）：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })],
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}