不久前,我制作了一个结合使用 SASS 变量和 CSS 自定义属性的项目。我定义了 Sass 变量,然后使用它们来创建 CSS 自定义属性。一切都很好。现在我试图做同样的事情,使用相同的代码和加载器(Webpack),但它不起作用,我不明白为什么。
我有一个style.scss如下所示的文件:
$var1: #ff3344;
h1 { color: $var1; }
:root { --color1: $var1; }
Run Code Online (Sandbox Code Playgroud)
sass-loader当我使用 Webpack 使用,构建我的项目时css-loader,style-loader我得到以下输出:
h1 { color: #ff3344; }
:root { --color1: $var1; }
Run Code Online (Sandbox Code Playgroud)
由于某种原因, 被$var1替换为 ,h1但未被替换为--color1。
鉴于我之前这样做没有问题,我预计sass-loader可能是原因。但我降级sass-loader到 6.0.7,它与我在项目中使用的版本相同,但我仍然遇到这个问题。为什么在分配给 时不sass-loader替换?$var1--color1