0

我们使用 webpack 将一些 sass 文件编译成 CSS hier 是 SASS 文件的片段：

.#{$prefix}title {
    color: $title-color;
}

它被编译成以下CSS：

.x-titlebar .x-title {
    color: #fff;
    color: var(--base-foreground-color);
}

我们在组件中有一些奇怪的行为。使用颜色常数删除第一条规则 - 也不起作用。

但是，如果我们删除带有变量的第二个颜色规则 - 它工作正常。

我们已经使用最后一个 Chrome 93.x 和最后一个 Edge 93.x 版本对其进行了测试——结果相同。

我们使用 sass-loader@10.2.0 & node-sass@6.0.1 较新版本与 ExtReact 7.4.0 不兼容

是否有可能告诉 sass-loader 不要将带有变量的规则放入已编译的 CSS 中？

编辑：我找到了主要原因。CSS 由 sencha-fashion 包编译。

在项目文件夹中有 node_modules\@sencha\cmd\dist\js\node_modules\fashion\defaults.json 文件。在文件中是以下部分

"cssVars": {
    "enable": true
}

在我切换到之后false- 所有变量规则都消失了，它解决了我的问题。该文件是 node_modules 的一部分，@sencha\cmd通过间接调用@sencha/ext-webpack-plugin，如果我清理并重建项目，它将丢失。

现在的问题是 - 如何使用@sencha/ext-webpack-plugin 进行配置？

4

0 回答 0