解决根据环境变量实现的构建换肤未生效问题

在前台前端项目中实现了换肤功能，根据不同的环境显示不同的皮肤颜色。例如，在开思电商环境下，元素以红色背景呈现；而在博世环境下，元素以蓝色背景呈现。然而，当访问博世环境时，发现有一些元素没有正确显示，如下图所示：

为什么调整为全局引入组件库的SCSS样式文件后不会发生追加样式变量被已存在的样式变量覆盖呢？

仔细翻阅组件库样式文件书写，其结构与书写方式如下（简化）：

// ├── styles
//    ├── _button.scss
//    ├── _variables.scss
//    ├── _colors.scss
//    ├── ...
//    └── bricks.scss

// _colors.scss
$primary-color: #da2227 !default; // 主色、突出色

// _variables.scss
@import 'colors';
$border-width: 1px !default; // 默认边框宽度

// _button.scss
.br-button-primary {
  backgroud-color: $primary-color;
}

// bricks.scss
@import 'variables';
@import 'button';

假如现在有根据环境变量往bricks.scss中追加样式变量$primary-color: #237fd6;，经过sass-loader处理后的结果如下：

// bricks.scss
$primary-color: #237fd6; // 追加的样式变量

$primary-color: #da2227 !default; // 已存在的样式变量

$border-width: 1px !default; // 默认边框宽度

.br-button-primary {
  backgroud-color: $primary-color;
}

处理的结果中其中有一个$primary-color是带有!default标记的变量，如果在之前的代码中没有定义或赋值这个变量，它将被默认设置为#da2227。但是，之前代码已经定义了$primary-color: #237fd6;，那么默认值将会被忽略。所以，最后会采用追加的样式变量。