[英]define a global sass variable with angular-cli
In my project, I need to inject a global variable to be used across the app, from an environment file, into SCSS files. 在我的项目中,我需要注入一个全局变量,以便在整个应用程序中使用,从环境文件到SCSS文件。
Following an advice such as this , isn't possible for me since the app contains ~50 different possible configs, so maintaining so many projects in angular.json
is just not feasible. 以下的建议,如本 ,因为应用程序包含〜50个不同的可能CONFIGS,在这样保持这么多的项目是不可能的,我
angular.json
仅仅是不可行的。
In our current setup, using webpack, we used the data
option for sass-loader
to inject what ever variable imported from the environment file. 在我们当前的设置中,使用webpack,我们使用
sass-loader
的data
选项来注入从环境文件导入的任何变量。 This is currently impossible with angular-cli - making the migration impossible. 目前这种角度cli是不可能的 - 使迁移变得不可能。
How can we achieve this? 我们怎样才能做到这一点?
I ended up succesfuly using ngx-build-plus , followed this article, and used this webpack.extra.js
: 我结束了succesfuly使用NGX建造加 ,随后该文章,并使用该
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};
`,
},
},
],
},
],
},
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.