在 Angular 中使用 Bulma scss 变量，变量没有改变

Question

我的 Angular 资产文件夹中有 Bulma scss，然后我将其导入我的 styles.scss

@import "./assets/bulma-scss/bulma.scss";

@import "./assets/bulma-scss/utilities/initial-variables.scss";
@import "./assets/bulma-scss/utilities/functions.scss";

$primary: red !default;

body {
  padding: 50px;
}

然后我从我的 html 组件调用它：

<div class="container">
  <button class="button is-large is-primary">Test Button</button>
</div>

我期望的结果是按钮是红色的，但它没有改变颜色。

我是不是忘记了什么？

Answer 1

对于 Angular CLI 应用程序，所有启动配置都发生在 .angular-cli.json 文件中。在该文件中，您会找到一个样式数组，我们可以在其中添加我们想要添加到项目中的任何 CSS / SCSS 文件。您还会找到一个脚本数组，如果需要，您可以在其中添加内容。

因此请确保您的 angular-cli.json 文件具有样式数组中引用的 styles.scss 路径。

在 Angular 中使用 Bulma scss 变量，变量没有改变

Using Bulma scss variables in Angular, variables not changing

sass

bulma

angular