历史搜索

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

游客2024-08-13 10:30:01

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

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

为什么调整为全局引入组件库的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;,那么默认值将会被忽略。所以,最后会采用追加的样式变量。