Question

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

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

在styles.scss中我有：

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

和app / variables：

$hello-background: yellow !default;

并在hello.component.scss中：

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

然后背景为黄色，即使我先尝试将其设置为红色。有办法解决这个问题吗？

Answer 1

这是因为您在styles.scss中设置/定义的变量未导入到您的组件中（不知道styles.scss），因此来自app/variables的默认值用来。如果要覆盖全局styles.scss和组件中的变量，可以使用以下内容：

应用/ variables.scss

$hello-background: yellow !default;

应用/ 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; }

Answer 2

检查您认为正在应用的样式表是否已实际应用。如果这是一个包含许多组件的网站中的组件，则将您的替代值放入应用程序级.scss文件app.component.scss中，然后查看其是否适用。

Angular + SCSS！默认不起作用

2 个答案: