Next.js能否记录Sass的@debug、@error、@warn规则？

Next.js默认不会输出Sass的调试类日志，需要通过自定义webpack配置开启sass-loader的日志功能，具体步骤如下：

• 项目根目录创建或修改next.config.js，添加webpack配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 定位处理SCSS/Sass的规则
    const sassRuleSet = config.module.rules.find(rule => 
      typeof rule.test === 'object' && rule.test.test('.scss')
    ).oneOf;

    sassRuleSet.forEach(rule => {
      // 找到sass-loader实例
      const sassLoader = rule.use.find(loader => loader.loader.includes('sass-loader'));
      if (sassLoader) {
        sassLoader.options = {
          ...sassLoader.options,
          sassOptions: {
            ...sassLoader.options?.sassOptions,
            // 自定义日志处理器，输出到终端
            logger: {
              debug: (msg) => console.log(`[Sass Debug] ${msg}`),
              warn: (msg) => console.warn(`[Sass Warn] ${msg}`),
              error: (msg) => console.error(`[Sass Error] ${msg}`)
            }
          }
        };
      }
    });

    return config;
  }
};

module.exports = nextConfig;

• 重启Next.js开发服务器，此时你的Sass代码中的@debug、@warn会在终端输出格式化后的日志，@error会终止编译并抛出错误信息。

• 额外说明：

  • 确保项目已安装sass依赖（执行npm install sass或yarn add sass）
  • 该配置在Next.js 13+的App Router和Pages Router模式下均生效
  • @error默认会中断编译并显示错误，自定义logger只是让日志格式更统一

内容的提问来源于stack exchange，提问作者Julian Costinea