Sass-loader 不替换变量?
Posted
技术标签:
【中文标题】Sass-loader 不替换变量?【英文标题】:Sass-loader not replacing variables? 【发布时间】:2018-11-22 03:34:39 【问题描述】:不久前,我做了一个项目,它使用了 SASS 变量和 CSS 自定义属性的组合。我定义了我的 Sass 变量,然后使用这些变量来创建我的 CSS 自定义属性。一切都很好。现在我正在尝试做完全相同的事情,使用相同的代码和加载器(Webpack),但它不起作用,我不知道为什么。
我有一个如下所示的style.scss
文件:
$var1: #ff3344;
h1 color: $var1;
:root --color1: $var1;
当我使用 sass-loader
、css-loader
和 style-loader
使用 Webpack 构建项目时,我得到以下输出:
h1 color: #ff3344;
:root --color1: $var1;
由于某种原因,$var1
被替换为 h1
而不是 --color1
。
看到我之前这样做没有问题,我预计sass-loader
可能是原因。但我将sass-loader
降级为 6.0.7,这与我在项目中使用的版本相同,但我仍然遇到这个问题。为什么sass-loader
分配给--color1
时不替换$var1
?
【问题讨论】:
你确定这有效吗? :root --color1: $var1; . 现有的 sass 编译器不会转换这个 另一方面,这有效:root --color1: #$var1; 我确定。这是我工作项目中的一些示例代码::root @each $name, $color in $page-colors --color-#$name: $color;
我想使用#
会起作用。但我不明白为什么我在以前的项目中不必这样做。就像上面一样,我有大约 100 个 CSS 属性分配给 Sass 变量,而且效果很好。
尝试比较 node-sass 版本。这很可能是新版本中的一个错误
【参考方案1】:
自定义变量值仅支持
#
内的 SassScript。
例如,如果你想拥有一组颜色:
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$colors: () !default;
$colors: map-merge((
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
), $colors);
@each $color, $value in $colors
--#$color: #$value;
【讨论】:
以上是关于Sass-loader 不替换变量?的主要内容,如果未能解决你的问题,请参考以下文章
为啥 maven 不替换 maven-release-plugin 发布版本的环境变量?
PSQL /copy : 变量替换不起作用 | PostgreSQL 11