angular - 在构建时设置 directional-scss 变量

Question

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

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

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

Answer 1

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

• 在angular-cli.json我定义了 2 个应用程序：ltr 和 rtl。
• 在样式下，每个应用程序编译 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"
• 我的构建 scipt 看起来像这样："build-en": "ng build --app=ltr --output-path=dist --aot -prod --bh / --locale=en-US"，注意--app=ltr. 以正确的方向在其他语言中执行相同的操作。

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

Answer 2

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

例如，如果您使用 Webpack：

https://github.com/webpack-contrib/sass-loader#environment-variables

当然，只有在直接使用配置（而不是使用 Angular CLI）或使用ng eject.