如何在VS Code中查看NextJS Sass生成的可读CSS代码

在Visual Studio Code中完全可以清晰查看Next.js项目内SCSS文件编译后的可读CSS输出，不需要解析压缩后的打包产物，以下是几种可直接落地的实现方式：

• 在VS Code扩展商店搜索安装Live Sass Compiler插件，安装完成后底部状态栏会出现Watch Sass开关按钮
• 点击开启监听后，每次保存.scss文件，插件会自动在同目录生成同名的普通.css文件和压缩后的.min.css文件，其中普通.css默认采用展开格式输出，保留完整缩进、换行，可读性极强，直接打开即可查看编译结果
• 可以在插件设置页自定义输出格式，支持嵌套、展开、紧凑、压缩四种模式，默认的展开模式完全满足可读性需求
  *该插件基于官方dart-sass做转译，和Next.js默认的SCSS转译逻辑完全一致，日常开发中快速核对单文件编译结果非常方便。

Next.js默认生产构建会自动压缩CSS，修改少量配置即可拿到项目实际构建流程中生成的可读CSS：

• 打开项目根目录的next.config.js（或next.config.mjs），添加如下配置关闭CSS压缩：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config, { dev }) {
    // 过滤掉CSS压缩插件，保留原始CSS格式
    if (!dev) {
      config.optimization.minimizer = config.optimization.minimizer.filter(
        (plugin) => plugin.constructor.name !== 'CssMinimizerPlugin'
      )
    }
    return config
  },
  // Next.js 13+ App Router版本需要额外添加该配置关闭内置CSS优化压缩
  experimental: {
    optimizeCss: false
  }
}

module.exports = nextConfig

• 配置保存后，在项目终端执行npm run build触发生产构建
• 构建完成后，打开项目根目录下的.next/static/css文件夹，里面存放的CSS文件就是未压缩、保留完整格式的编译产物，直接在VS Code中打开即可阅读
  *注意：该配置仅用于临时导出可读CSS，查看完成后建议恢复配置，避免生产环境部署未压缩的CSS影响页面加载性能。如果是npm run dev开发模式，不需要修改配置，直接打开浏览器开发者工具的Sources面板，对应站点路径下的.next/static/css目录内的CSS本身就是未压缩带格式的版本，可直接查看。

如果不需要查看完整CSS文件，只是想核对某段SCSS对应的编译输出，可以通过sourcemap快速定位：

• 在next.config.js中添加配置开启CSS sourcemap：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.devtool = 'source-map'
    return config
  }
}

module.exports = nextConfig

• 启动开发服务后，打开浏览器开发者工具的Elements面板，选中对应DOM节点，在Styles规则栏找到目标SCSS样式，点击样式后方的文件路径跳转到Sources面板，即可看到对应SCSS片段编译后的CSS内容，格式完全可读，不需要在全量CSS文件中手动查找。

内容的提问来源于stack exchange，提问作者Mic C