Установить динамические переменные в SCSS с помощью npm

Question

У меня нет большого опыта работы с npm и SCSS, поэтому у меня следующий вопрос:

У меня есть один файл SCSS (app.scss), в котором есть много мест, которые я использую один цвет по умолчанию для фона. Моя идея состоит в том, чтобы иметь переменную $ background_color, чтобы я мог легко изменить этот цвет. Возможно ли это, и если да, то как?

Вот код моего mix.js:

const mix = require('laravel-mix');

mix.setPublicPath('public');

mix.sass('resources/sass/frontend/app.scss', 'css/frontend/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend/backend.js')
    .extract([
        'jquery',
        'bootstrap',
    ]);

if (mix.inProduction() || process.env.npm_lifecycle_event !== 'hot') {
    mix.version();
}

Answer 1

sass позволяет использовать многократно используемые переменные:

$color-blue: #0C4376;

потребляться следующим образом:

.box {
  width: 200px;
  height: 50px;
  background-color: $color-blue; // variable used here
}

https://sass-lang.com/guide