使用 angular-cli 定义全局 sass 变量
define a global sass variable with angular-cli
在我的项目中,我需要将要在整个应用程序中使用的全局变量从环境文件注入到 SCSS 文件中。
遵循 之类的建议对我来说是不可能的,因为该应用程序包含约 50 种不同的可能配置,因此在 angular.json
中维护这么多项目是不可行的。
在我们当前的设置中,使用 webpack,我们使用 sass-loader
的 data
选项来注入从环境文件导入的任何变量。
目前使用 angular-cli 是不可能的 - 使迁移变得不可能。
我们怎样才能做到这一点?
我最终成功地使用了 ngx-build-plus, followed 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};
`,
},
},
],
},
],
},
};
在我的项目中,我需要将要在整个应用程序中使用的全局变量从环境文件注入到 SCSS 文件中。
遵循 angular.json
中维护这么多项目是不可行的。
在我们当前的设置中,使用 webpack,我们使用 sass-loader
的 data
选项来注入从环境文件导入的任何变量。
目前使用 angular-cli 是不可能的 - 使迁移变得不可能。
我们怎样才能做到这一点?
我最终成功地使用了 ngx-build-plus, followed 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};
`,
},
},
],
},
],
},
};