Angular + SCSS！默认不起作用答案

【问题标题】：Angular + SCSS !default not workingAngular + SCSS！默认不起作用
【发布时间】：2018-03-08 17:04:29
【问题描述】：

Scss 具有 !default 功能，可以轻松地允许客户端覆盖值。

但是，如果我在 Angular 中使用它，它就不起作用，我认为是由于 Angular 的封装。示例：

在 styles.scss 我有：

$hello-background: red;
@import 'app/variables';

在应用程序/变量中：

$hello-background: yellow !default;

在 hello.component.scss 中：

@import '../variables';
:host {
  display: block;
  background: $hello-background;
}

然后背景是黄色的，尽管我先尝试将其设置为红色。有没有办法解决这个问题？

【问题讨论】：

【解决方案1】：

这是因为你在styles.scss 中设置/定义的变量没有导入到你的组件中（它不知道styles.scss），所以使用来自app/variables 的默认值。如果你想覆盖全局 styles.scss 和组件中的变量，你可以使用这样的东西：

app/variables.scss

$hello-background: yellow !default;

app/override.scss

$hello-background: red;

styles.scss

@import 'app/override';
@import 'app/variables';

hello.component.scss：

@import '../overrides';
@import '../variables';
:host {
  display: block;
  background: $hello-background;
}

【讨论】：

【解决方案2】：

检查您认为正在应用的样式表是否实际正在应用。如果这是一个包含许多组件的网站中的一个组件，请将您的覆盖值放入您的应用级 .scss 文件 app.component.scss 中，然后查看它是否被应用。

【讨论】：