在 Webpack 项目中过滤 Sass 的 @debug 输出，可以通过以下 3 种主流方案实现（针对生产环境）：

方案一：通过 sass-loader 配置静默模式 (推荐)

直接禁用所有 Sass 日志（包括 @debug、@warn），仅保留 @error：

// webpack.config.js (生产环境配置)
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                // 关键配置：静默所有非错误日志
                quietDeps: true,
              },
            },
          },
        ],
      },
    ],
  },
};

优点

• 配置简单，一行解决
• 兼容新版 Dart Sass

缺点

• 同时过滤了 @warn 警告

方案二：自定义 Logger 精准过滤

通过自定义 logger 选择性屏蔽 @debug，保留 @warn 和 @error：

// webpack.config.js
const sass = require("sass");

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: sass,
              sassOptions: {
                // 自定义 logger
                logger: {
                  debug: () => {}, // 屏蔽 @debug
                  warn: (message, options) => {
                    console.warn("Sass 警告:", message); // 保留 @warn
                  },
                },
              },
            },
          },
        ],
      },
    ],
  },
};

优点

• 精准控制，保留有用警告
• 支持自定义日志格式

缺点

• 需要手动管理 logger

方案三：构建时移除 @debug 语句 (激进方案)

使用 string-replace-loader 在编译前删除所有 @debug 代码：

npm install string-replace-loader --save-dev

// webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              /* sass 配置 */
            },
          },
          {
            loader: "string-replace-loader",
            options: {
              search: "@debugs+.*?;", // 正则匹配 @debug 语句
              replace: ";", // 替换为分号
              flags: "g",
            },
          },
        ],
      },
    ],
  },
};

优点

• 彻底移除源码中的调试代码

缺点

• 可能误删含 @debug 的注释或字符串
• 增加构建复杂度

最佳实践建议

场景	推荐方案	原因
快速过滤所有日志	方案一	配置简单，适合中小项目
需要保留 @warn 警告	方案二	精准控制，适合大型项目
需要物理删除调试代码	方案三	安全要求严格的项目

扩展：环境变量动态控制

结合 process.env.NODE_ENV 实现环境差异化配置：

// webpack.config.js
const isProduction = process.env.NODE_ENV === "production";

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                logger: isProduction ? { debug: () => {} } : sass.Logger.silent,
              },
            },
          },
        ],
      },
    ],
  },
};

注意事项

1. 版本兼容性

   • quietDeps 需要 Dart Sass 1.35.0+ (sass-loader 12.0.0+)
   • 旧版可使用 logger: sass.Logger.silent 实现类似效果

2. Source Map 影响
   过滤操作不会影响 Source Map 生成，调试仍可定位原始代码位置

3. 性能对比

   方案	构建速度影响	输出安全性
   方案一	无	中
   方案二	轻微	高
   方案三	中等	最高

通过合理选择方案，既可保持开发环境的调试便利性，又能确保生产环境的日志清洁。建议优先尝试方案二，在灵活性和可控性之间取得最佳平衡。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24