Angular+Webpack项目：如何将SCSS变量提取至JS/JSON文件？

嘿，针对你在开发基于Webpack的Angular多主题应用时遇到的AOT编译限制——没法直接在Angular代码里导入独立SCSS文件中的主题变量，我这里有几个实用的解决方案，帮你把SCSS变量提取到JS/JSON文件中：

这是专门处理SCSS变量导出的工具，能直接把SCSS变量转成JSON/JS对象，完美兼容AOT：

1. 先安装依赖包：

npm install sass-extract sass-extract-js --save-dev

2. 写个简单的提取脚本（比如命名为extract-theme-vars.js）：

const sassExtract = require('sass-extract');
const fs = require('fs');

// 替换成你实际的主题变量SCSS文件路径
const themeVarsPath = './src/styles/themes/vars.scss';

// 提取SCSS变量
const extractedResult = sassExtract.renderSync({
  file: themeVarsPath
});

// 把变量转成TS模块，方便Angular导入
const tsOutput = `export const themeVars = ${JSON.stringify(extractedResult.vars.global, null, 2)};`;
fs.writeFileSync('./src/app/theme-vars.ts', tsOutput);

3. 把提取脚本加入构建流程：
   在package.json的scripts里添加：

"scripts": {
  "extract-vars": "node ./extract-theme-vars.js",
  "build": "npm run extract-vars && ng build --prod"
}

这样每次构建前都会自动把SCSS变量同步到TS文件里，你在Angular代码里直接导入themeVars就行，完全符合AOT要求。

如果想把提取逻辑整合到Webpack构建流程里，可以写个轻量的自定义loader：

1. 创建loader文件（比如scss-to-js-loader.js）：

module.exports = function(source) {
  const themeVars = {};
  // 解析每行的SCSS变量（这里假设你的变量都是每行一个$开头的格式）
  source.split('\n').forEach(line => {
    if (line.trim().startsWith('$') && line.includes(':')) {
      const [varName, varValue] = line.split(':').map(item => item.trim());
      // 去掉$符号和末尾的分号
      themeVars[varName.slice(1)] = varValue.replace(';', '').trim();
    }
  });
  // 返回可导入的JS模块
  return `export default ${JSON.stringify(themeVars)};`;
};

2. 修改Webpack配置，添加这个loader：

module.exports = {
  module: {
    rules: [
      {
        test: /theme-vars\.scss$/, // 匹配你的主题变量文件
        use: [
          'ts-loader', // 转成TS可识别的模块
          './scss-to-js-loader.js' // 自定义loader处理变量
        ],
        include: ['./src/styles/themes/'] // 对应你原配置里的include路径
      }
    ]
  }
};

之后在Angular代码里就能直接导入SCSS文件了：

import themeVars from '../styles/themes/theme-vars.scss';

提示：这个方法需要你的SCSS变量格式比较规整，如果有复杂嵌套变量，可能需要调整解析逻辑。

如果只是需要在所有SCSS文件中共享主题变量，不需要在TS代码里使用，可以用style-resources-loader全局注入：

1. 安装依赖：

npm install style-resources-loader --save-dev

2. 配置Webpack：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'sass-loader',
          {
            loader: 'style-resources-loader',
            options: {
              patterns: ['./src/styles/themes/vars.scss']
            }
          }
        ]
      }
    ]
  }
};

这样所有SCSS文件都能直接用主题变量，但没法在TS代码中访问，适合纯样式层面的多主题需求。

• 如果你用Angular CLI，需要借助@angular-builders/custom-webpack来扩展Webpack配置，因为CLI默认不允许直接修改webpack.config.js。
• 提取变量后，若需要类型安全，可以在生成的TS文件里手动添加类型定义，或者在脚本里自动生成。
• 修改SCSS变量后，记得重新执行提取脚本或构建命令，才能同步到JS/TS文件中。

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