在Angular组件中使用重写的SCSS变量的正确方式

Question

我正在Angular 9项目中使用Bulma CSS框架。

我在style.scs文件中导入了Bulma，并在导入之前覆盖了两个变量：

$family-primary: 'Raleway', sans-serif;
$primary: hsl(204, 71%, 53%);
@import "~bulma";

我希望在组件中使用修改后的$primary变量。

.logo:hover{
color: $primary;
} 

这导致Undefined variable: $primary的错误。

当我导入Bulma变量文件(@import "~bulma/sass/utilities/all";(时，它就工作了。但是，$primary变量未被正确覆盖。我认为这是因为组件正在导入原始文件(包含变量的原始值(，这反过来又覆盖了我对styles.scss文件中变量的更改。

导入组件中styles.scs中重写的变量的正确方法是什么？

如果有任何建议，我将不胜感激。谢谢

Answer 1

对于我的Angular项目，我在组件之间使用共享的SCSS文件。当您将Bulma导入styles.scss时，它将把SCSS编译为CSS，您可以在组件HTML文件中使用CSS的类。但是不能在组件SCSS文件中使用变量、函数和。它们将仅在styles.scss中可用。

要在组件文件中使用Bulma(重写(变量等，可以使用共享的SCSS文件

样式.scs

导入完整的Bulma，这样它将编译可以在组件html文件中使用的类

@import 'override'    
@import '~bulma/bulma';

覆盖.scs

$family-primary: 'Raleway', sans-serif;
$primary: hsl(204, 71%, 53%);

共享.scs

不要再导入完整的Bulma，而只导入组件之间需要的SCSS文件。

@import 'override';
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/derived-variables';

组件.scs

@import 'shared';
.logo:hover{
color: $primary;
}