如何简化基于Sass的多客户主题生成冗余配置？

针对你目前的冗余问题，可以从目录结构重构、移除重复入口文件、自动化编译配置三个维度来简化：

1. 重构目录：集中管理客户变量 #

把分散在每个客户文件夹里的variable.scss集中到单独的variables目录，完全删除每个客户的login.scss和style.scss，目录结构改为：

├sass
│  ├variables
│  │  ├CUSTOMER1.scss
│  │  ├CUSTOMER2.scss
│  ├login-base.scss
│  └style-base.scss
└compilerconfig.json

2. 直接编译基础文件，动态引入变量 #

利用Sass的编译参数，在编译时指定对应的客户变量文件，无需再写重复的入口导入代码。

方式一：修改compilerconfig.json配置 #

每个客户的编译条目直接指向base文件，通过options指定变量导入（需你的编译工具支持Sass的注入参数，比如Web Compiler或dart-sass）：

[
  // CUSTOMER1
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER1/login.css",
    "inputFile": "sass/login-base.scss",
    "options": {
      "additionalData": "@import './variables/CUSTOMER1.scss';"
    }
  },
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER1/style.css",
    "inputFile": "sass/style-base.scss",
    "options": {
      "additionalData": "@import './variables/CUSTOMER1.scss';"
    }
  },
  // CUSTOMER2
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER2/login.css",
    "inputFile": "sass/login-base.scss",
    "options": {
      "additionalData": "@import './variables/CUSTOMER2.scss';"
    }
  },
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER2/style.css",
    "inputFile": "sass/style-base.scss",
    "options": {
      "additionalData": "@import './variables/CUSTOMER2.scss';"
    }
  }
]

注：不同编译工具的参数名称可能不同，核心是在编译base文件前注入客户变量。

方式二：用脚本自动化编译（推荐，适合大量客户） #

如果未来客户数量达上百家，手动维护compilerconfig.json依然繁琐，可以写一个简单的Node.js脚本：

1. 遍历sass/variables目录下的所有客户变量文件
2. 自动生成对应的编译配置条目
3. 执行编译或更新配置文件

示例脚本（Node.js）：

const fs = require('fs');
const path = require('path');

const variablesDir = path.join(__dirname, 'sass/variables');
const compilerConfigPath = path.join(__dirname, 'compilerconfig.json');
const outputBasePath = '(MyProjectPath)/themes';

// 读取所有客户变量文件
const customerFiles = fs.readdirSync(variablesDir).filter(file => file.endsWith('.scss'));

// 生成编译配置条目
const configEntries = customerFiles.flatMap(file => {
  const customerName = file.replace('.scss', '');
  return [
    {
      "outputFile": `${outputBasePath}/${customerName}/login.css`,
      "inputFile": "sass/login-base.scss",
      "options": {
        "additionalData": `@import './variables/${file}';`
      }
    },
    {
      "outputFile": `${outputBasePath}/${customerName}/style.css`,
      "inputFile": "sass/style-base.scss",
      "options": {
        "additionalData": `@import './variables/${file}';`
      }
    }
  ];
});

// 写入compilerconfig.json
fs.writeFileSync(compilerConfigPath, JSON.stringify(configEntries, null, 2));
console.log('编译配置已更新');

新增客户时，只需在sass/variables目录下新增CUSTOMERX.scss，运行脚本即可自动生成所有编译配置。

3. 额外优化：统一变量命名规范 #

为了避免变量冲突，建议在base文件中给变量设置默认值，客户变量文件只需定义需要修改的变量：

// login-base.scss
$primary-color: #007bff !default;
$login-bg-color: #f8f9fa !default;

// 后续使用变量
.login-btn {
  background-color: $primary-color;
}

这样客户变量文件无需重复所有基础变量，只维护差异化部分即可。

内容的提问来源于stack exchange，提问作者Szilárd Kotta