css - npm を使用して SCSS で動的変数を設定する

Question

npm と SCSS の経験があまりないので、次の質問があります。

私は 1 つの SCSS (app.scss) ファイルを持っています。このファイルには、背景に 1 つのデフォルト色を使用する場所がたくさんあります。私の考えは、変数 $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();
}