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

【问题标题】：Set dynamic variables in SCSS with npm使用 npm 在 SCSS 中设置动态变量
【发布时间】：2019-05-08 15:49:21
【问题描述】：

我对 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();
}

【问题讨论】：

我怀疑提供的代码是否相关。而是添加您的 SCSS。 sass-lang.com/guide#topic-2
我在发布这个问题之前已经尝试过了，但是在创建的 css 文件中 $background_color 没有被替换

标签： css npm sass scss-mixins

【解决方案1】：

sass 允许使用可重用的变量：

$color-blue: #0C4376;

消费如下：

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

https://sass-lang.com/guide

【讨论】：