Как мне переопределить производную переменную Bulma, используя S CSS?

Question

Я использую Bulma с Webpack 4. Я пытаюсь изменить цвет button.is-primary, чтобы он был розовым, а не бирюзовым.

Вот все содержимое моего .s css файл.

@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Poppins:600');

$body-size: 14px;
$primary: $pink;

@import "../../node_modules/bulma/bulma.sass";

Это вызывает у меня следующую ошибку при сборке.

1>Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
1>
1>$primary: $pink;
1>         ^
1>      Undefined variable: "$pink".

Теперь, если я установлю $ primary в качестве указанного c шестнадцатеричного цвета, он будет прекрасно работать, так что эта проблема, кажется, потому что я пытаюсь использовать существующую переменную цвета $ pink. Для меня имеет смысл, что он не был определен на тот момент, но в документах четко сказано, что я могу добавить свои переопределения перед импортом Bulma, и их пример делает то же самое.

Может кто-нибудь указать мне в правильном направлении?

РЕДАКТИРОВАТЬ: вот экран документации я смотрю.

https://bulma.io/documentation/customize/with-webpack/

Я отмечаю, что в их примере они устанавливают новые значения для производных переменных, НО только там, где они переопределили начальное значение, как это ...

$pink: #FA7C91;

Если я изменю свой файл .s css следующим образом, он скомпилирует и работать как положено.

@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Poppins:600');

$body-size: 14px;
$pink: #FA7C91;
$primary: $pink;

@import "../../node_modules/bulma/bulma.sass";

Answer 1

Это должно прояснить для вас вещи: https://versions.bulma.io/0.7.0/documentation/overview/customize/

// 1. Import the initial variables
@import "../sass/utilities/initial-variables";


// 2. Set your own initial variables (optional)
$pink: #ffb3b3;


// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;