Использование переменных Bulma scss в угловых, переменные не изменяются

#angular #sass #bulma

Вопрос:

У меня есть Bulma scss в папке Angular assets, а затем я импортирую его в свои стили.scss

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

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

$primary: red !defau<

body {
  padding: 50px;
}
 

Затем я вызываю его из своего html-компонента:

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

Результат, которого я ожидаю, состоит в том, что кнопка будет красной, но она не меняет цвет.

Я что-то забыл?

Ответ №1:

Для приложений Angular CLI вся начальная конфигурация выполняется в файле .angular-cli.json. В этом файле вы найдете массив стилей, в который мы можем добавить любые файлы CSS / SCSS, которые мы хотим добавить в наш проект. Вы также найдете массив сценариев, в который вы можете добавлять что-то, если вам это нужно.

Поэтому убедитесь, что в вашем файле angular-cli.json указан путь styles.scss, указанный в массиве стилей.