在构建时设置 directional-scss 变量答案

【问题标题】：set directional-scss variable at build time在构建时设置 directional-scss 变量
【发布时间】：2018-03-21 23:11:44
【问题描述】：

我正在使用 angular 构建多语言系统，使用 angular i18n 进行内部化我必须将每种语言构建为不同的包。由于某些语言是 RTL，我使用定向 scss（而不是导入不同的样式表或在元素上应用 class=rtl）。

问题是，我不想在每次构建之前更改代码。我只需要在 scss 变量文件中更改一个简单的行： $dir = ltr 到 $dir = rtl 在 RTL 语言上。

是否可以从构建脚本或其他东西中提取此值？这将创建更顺畅的构建过程。

【问题讨论】：

【解决方案1】：

我找到了解决方案/解决方法。

在angular-cli.json 中我定义了 2 个应用程序：ltr 和 rtl。
在styles下，每个app编译2个不同的文件：
- directional-scss.scss 和 directional-scss-rtl.scss - 与 $dir 变量设置为正确的值。
- style-ltr.scss 和 style-rtl.scss - 基本上它们是相同的，但是每个都导入了正确的 directional-scss 文件。
在我的package.json 文件中，我添加了一个脚本来构建所有："build-all": "npm-run-all --parallel build-en build-i18n:he"
我的构建脚本如下所示："build-en": "ng build --app=ltr --output-path=dist --aot -prod --bh / --locale=en-US"，注意--app=ltr。以正确的方向在其他语言中执行相同的构建。

就是这样，我现在可以运行这个脚本并构建两种语言了！或者同时在不同的端口上为开发和质量检查提供服务。

【讨论】：

【解决方案2】：

唯一的方法是修改您的构建过程以包含定义此变量的新导入文件 - 无法直接从 Sass 代码访问环境变量。

例如，如果您使用的是 Webpack：

当然，只有在直接使用配置（而不是使用 Angular CLI）或使用ng eject 时，您才能更改该配置。

【讨论】：