определить глобальную переменную sass с помощью angular-cli

Question

В моем проекте мне нужно внедрить глобальную переменную для использования в приложении из файла среды в файлы SCSS.

Следуя совету, например this , isnдля меня это невозможно, поскольку приложение содержит ~ 50 различных возможных конфигураций, поэтому поддерживать столько проектов в angular.json просто невозможно.

В нашей текущей настройке, используя веб-пакет, мы использовали опцию data для sass-loader, чтобы ввести любую переменную, импортированную из файла среды.В настоящее время это невозможно с помощью angular-cli, что делает миграцию невозможной.

Как этого добиться?

Answer 1

В итоге я успешно использовал ngx-build-plus , затем эту статью и использовал эту webpack.extra.js:

const webpack = require('webpack');
const configs = require('./src/configs');

module.exports = {
  plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
  resolve: {
    modules: ["node_modules"],
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              includePaths: ["src/ng1/assets/sass"],
              data: `
                    $templateTheme: ${configs.templateTheme};
                  `,
            },
          },
        ],
      },
    ],
  },
};