使用 npm 在 SCSS 中设置动态变量

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

使用 npm 在 SCSS 中设置动态变量

Set dynamic variables in SCSS with npm

css

sass

npm

scss-mixins