使用 angular-cli 定义一个全局 sass 变量答案

【问题标题】：define a global sass variable with angular-cli使用 angular-cli 定义一个全局 sass 变量
【发布时间】：2019-09-05 12:51:31
【问题描述】：

在我的项目中，我需要将一个全局变量从环境文件中注入到 SCSS 文件中，以便在整个应用程序中使用。

遵循this 之类的建议对我来说是不可能的，因为该应用程序包含大约 50 种不同的可能配置，因此在angular.json 中维护这么多项目是不可行的。

在我们当前的设置中，使用 webpack，我们使用 data 选项为 sass-loader 注入从环境文件导入的任何变量。目前使用 angular-cli 是不可能的 - 使得迁移变得不可能。

我们怎样才能做到这一点？

【问题讨论】：

环境文件在运行时被解释，而 SCSS 变量在编译时被解析。你想错了。
环境文件在 webpack 构建时经常被读取

标签： angular angular-cli angular-hybrid

【解决方案1】：

我最终成功地使用了ngx-build-plus，关注了this 的文章，并使用了这个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};
                  `,
            },
          },
        ],
      },
    ],
  },
};

【讨论】：