Vite + Sass + CSS Modules: composes属性限制问题咨询

问题背景 #

将项目从create-react-app（CRA）迁移至Vite后，SCSS模块中通过composes关联的样式出现嵌套语法未被预处理的警告，代码在CRA中可正常构建，但Vite打包时提示：

warnings when minifying css:
▲ [WARNING] CSS nesting syntax is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14") [invalid-@nest]

<stdin>:309:2:
  309 │   &:not(:disabled) {
      ╵   ^

相关代码片段：

Button.module.scss #

.btn {
  border-radius: 8px;
  border-style: solid;
  padding: 8px;
  cursor: pointer;

  --btn-bg-color: #efefef;

  &:not(:disabled) {
    cursor: pointer;
    background-color: var(--btn-bg-color);

    &:hover {
      --btn-bg-color: gray;
      border-color: white;
    }
  }
}

其他模块样式 #

.label {
  composes: btn from 'src/Button.module.scss'
}

问题解答 #

1. 能否让代码像之前一样正常工作？ #

可以，只需调整Vite配置，确保SCSS模块的composes关联文件被正确预编译：

• 安装必要依赖：Vite处理SCSS需要sass预处理器，执行安装命令：

  npm install -D sass
  

• 配置路径别名：在vite.config.js中添加src路径别名，确保composes的路径能被正确解析：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import path from 'path'
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        'src': path.resolve(__dirname, './src')
      }
    },
    css: {
      modules: {
        // 可选：保持和CRA一致的类名生成规则，也可使用Vite默认规则
        generateScopedName: '[name]__[local]___[hash:base64:5]'
      },
      preprocessorOptions: {
        scss: {
          // 若有全局SCSS变量，可在此配置，无需额外处理嵌套（Sass原生支持）
        }
      }
    }
  })
  

• 移除无效配置：无需使用postcss-nested插件，因为SCSS原生支持嵌套语法，只要文件经过Sass预编译即可。

完成以上配置后，Vite会正确处理SCSS模块的composes关联，嵌套语法会被预编译为兼容目标环境的普通CSS，警告消失。

2. 当前错误是否是预期行为？CRA是否有特殊处理？ #

是预期行为，CRA和Vite的CSS模块处理逻辑存在差异：

• CRA的特殊处理：CRA默认内置了完整的SCSS模块支持，会自动识别.module.scss文件，用Sass预编译处理嵌套语法，同时对composes属性做了专门的解析逻辑，自动关联并预编译依赖的SCSS文件，无需额外配置。
• Vite的默认行为：Vite默认支持SCSS和CSS模块，但不会自动识别src这类绝对路径（需手动配置别名），且如果路径解析失败，关联的SCSS文件会被当作普通CSS处理，导致嵌套语法未被预编译，最终触发目标环境不支持原生CSS嵌套的警告。

内容的提问来源于stack exchange，提问作者jeron-diovis