多UI主题场景下Scss从@import迁移至@use/@forward的方案咨询

思路1：通过构建工具动态映射变量模块 #

所有组件中统一使用固定路径引用变量模块：

// 组件文件中统一写法
@use '../variables' as *;

借助Webpack、Vite等构建工具的路径映射能力，在构建不同主题时，将../variables指向对应主题的变量文件：

• 构建主题A时，把variables-a.scss映射为variables.scss
• 构建主题B时，把variables-b.scss映射为variables.scss

以Webpack为例，可通过resolve.alias配置实现：

// webpack.config.js
module.exports = (env) => {
  const theme = env.theme || 'a';
  return {
    resolve: {
      alias: {
        './scss/variables': path.resolve(__dirname, `./src/scss/variables-${theme}.scss`)
      }
    }
  };
};

组件无需修改导入语句，只需通过构建命令指定主题参数，即可生成对应主题的样式文件。

思路2：用Sass @use ... with实现主题变量覆盖 #

1. 先创建包含默认变量的基础文件_base-variables.scss：

// _base-variables.scss
$primary-color: #007bff !default;
$text-color: #333 !default;

2. 每个主题文件导入基础变量并覆盖默认值，同时转发变量：

// variables-a.scss
@use './base-variables' as * with (
  $primary-color: #ff4d4f,
  $text-color: #1a1a1a
);
@forward './base-variables';

// variables-b.scss
@use './base-variables' as * with (
  $primary-color: #52c41a,
  $text-color: #262626
);
@forward './base-variables';

3. 组件统一引用基础变量文件：

// 组件文件
@use '../base-variables' as *;

.button {
  background-color: $primary-color;
  color: $text-color;
}

构建时，在入口文件导入对应主题的变量文件（如@use './variables-a'），主题变量会自动覆盖基础变量，组件无需修改导入路径。

思路3：结合CSS自定义属性实现动态主题切换 #

将Sass变量转换为全局CSS变量，通过前端动态切换CSS变量值实现主题切换，无需重新编译Sass：

1. 主题文件中定义Sass变量并赋值给CSS变量：

// variables-a.scss
$primary-color: #ff4d4f;
$text-color: #1a1a1a;

:root {
  --primary-color: #{$primary-color};
  --text-color: #{$text-color};
}

// variables-b.scss
$primary-color: #52c41a;
$text-color: #262626;

:root {
  --primary-color: #{$primary-color};
  --text-color: #{$text-color};
}

2. 组件中直接使用CSS变量，无需每个组件导入Sass变量：

// 组件文件
.button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

3. 切换主题时，可通过JavaScript替换根元素的CSS变量值，或者动态加载对应主题的CSS文件，实现前端实时切换主题。

内容的提问来源于stack exchange，提问作者Giallo