Question

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

我无法遵循this之类的建议，因为该应用程序包含约50个不同的可能配置，因此在angular.json中维护如此多的项目只是不可行。

在当前设置中，使用webpack，我们为data使用了sass-loader选项，以注入从环境文件导入的变量。目前，使用angular-cli无法做到这一点-无法进行迁移。

我们如何实现这一目标？

Answer 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};
                  `,
            },
          },
        ],
      },
    ],
  },
};

使用angular-cli定义全局sass变量

1 个答案: