Vite + Sass + CSS 模块：`composes` 属性限制

Question

我正在将我的项目从 create-react-app 迁移到 Vite。

\n

我的风格中有以下片段：

\n

// Button.module.scss\n.btn {\n  border-radius: 8px;\n  border-style: solid;\n  padding: 8px;\n  cursor: pointer;\n\n  --btn-bg-color: #efefef;\n\n  &:not(:disabled) {\n    cursor: pointer;\n    background-color: var(--btn-bg-color);\n\n    &:hover {\n      --btn-bg-color: gray;\n      border-color: white;\n    }\n  }\n}\n

\n

在其他模块中：

\n

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

\n

这曾经用 webpack 构建得很好。

\n

有了 Vite，在 css 包中我得到了这个：

\n

._btn_x66zc_1 {\n  border-radius: 8px;\n  border-style: solid;\n  padding: 8px;\n  cursor: pointer;\n  --btn-bg-color: #efefef;\n\n&\n:not(:disabled) {\n  cursor: pointer;\n  background-color: var(--btn-bg-color);\n\n&\n:hover {\n  --btn-bg-color: gray;\n  border-color: #fff\n}\n\n}\n}\n

\n

以及 CLI 警告：

\n

warnings when minifying css:\n\xe2\x96\xb2 [WARNING] CSS nesting syntax is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14") [invalid-@nest]\n\n    <stdin>:309:2:\n      309 \xe2\x94\x82   &:not(:disabled) {\n          \xe2\x95\xb5   ^\n

\n

显然，与 prop 链接的模块composes没有得到预处理。

\n

我尝试添加一个postcss-nested插件 \xe2\x80\x93 希望嵌套语法可以在预处理和后处理阶段处理：

\n

// vite.config.ts\n{\n  css: {\n    postcss: { plugins: [ postcssNested() ] }\n  }\n}\n

\n

但这没有任何作用。

\n

问题是：

\n

\n
1. 是否可以让它像以前一样工作？
\n
2. 我现在遇到的错误是预期的行为吗？（因此，react-app 是否使用了一些特定的技巧来使这种非常规用法成为可能？）
\n

\n