Блог

Я изучаю Sass и пытаюсь настроить CSS-фреймворк Bulma. Я пытаюсь сделать его фиолетовым, но это не работает.

Я запустил инициализацию npm и установил Bulma и node-sass.

Мой файл sass: —

 @import "node_modules/bulma/bulma";

$purple: #8A4D76;
$primary: $purple;

body {
  background: aquamarine;
  margin: 0;
}
 

Часть сценария файла package.json: —

 "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1",
    "sass": "node-sass scss/ -o dist/css/"
  }
 

Я создал кнопку, на которой я дал is-основной класс. Я получаю зеленый цвет Бульмы по умолчанию, но я не получаю настроенный фиолетовый цвет. Как мне следует действовать?

Если по умолчанию отображается стиль Bulma, то, вероятно, он связан не с частью сценария вашего package.json файла, а с файлом sass.

Это не работает, потому что вы импортировали Bulma перед настройкой переменных sass.

То, что вы должны сделать, это установить $purple , $primary а затем @import вот так:

 // Set your variables
$purple: #8A4D76;
$primary: $purple;

// Import bulma
@import "node_modules/bulma/bulma";

// This is classic CSS not related to bulma, you can place it where your want
body {
  background: aquamarine;
  margin: 0;
}
 

Вы можете взглянуть на этот пример файла scss из документации.

Кроме того, если вы хотите использовать расширения Bulma, вам необходимо импортировать их после самой Bulma в ваш файл scss.

Таким образом, порядок в вашем файле scss должен быть:

1. Настройка переменных sass
2. Импорт Бульмы
3. Импорт расширений Bulma