NextJS执行next dev脚本时如何禁用Sass预处理

可以通过修改next.config.js配置实现，核心思路是在开发环境的webpack链路里剔除Next.js内置的Sass文件处理规则，让dev服务不再监听、编译scss源文件，把样式处理流程完全交给IDE侧工具，具体操作如下：

• 调整next.config.js配置，仅在开发环境过滤内置sass/scss处理规则
  直接在配置里覆写webpack规则项，代码如下：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config, { dev }) => {
      if (dev) {
        // 移除内置的sass/scss匹配规则，阻断Next.js原生编译链路
        config.module.rules = config.module.rules.filter(rule => {
          const ruleTest = rule.test?.toString()
          return !(ruleTest && (ruleTest.includes('scss') || ruleTest.includes('sass')))
        })
      }
      return config
    }
  }
  
  module.exports = nextConfig
  

• 配置IDE侧独立Sass编译流程
  用IDE自带的Sass编译插件（比如VS Code生态的Live Sass Compiler），单独监听项目内scss文件的变动，将编译产物直接输出到public目录下的静态资源文件夹，之后在项目入口_app文件中直接引入编译完成的CSS文件即可，注意不要在业务代码里直接引入.scss/.sass后缀的源文件，避免触发Next.js的文件类型识别。
• 适配注意事项
  • 上述配置仅对next dev开发环境生效，不会影响生产环境next build的默认构建逻辑，如果生产环境也需要走独立编译流程，去掉配置里的dev判断即可
  • 如果项目中使用了SCSS Module，需要在IDE的Sass编译插件里开启CSS Module支持，保证类名生成规则和之前Next.js内置规则一致，避免样式类名不匹配的问题
  • 配置修改完成后需要重启dev服务生效，后续修改scss文件时，Next.js只会感知到public目录下静态CSS文件的变动，不会触发全量项目资源重编译，编译耗时会大幅降低

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