4

i'm using angular to build multi language system, with angular i18n for internalization I have to build each language as a different package. Since some of the languages are RTL, i'm using directional scss (instead of importing different stylesheets or applying class=rtl on elements).

The issue is, that I don't want to change code before each build. I need to change just one simple line in scss variables file: $dir = ltr to $dir = rtl on RTL languages.

Is it possible to extract this value from the build script or something ? that would create much smoother build process.

Shaniqwa
  • 1,924
  • 2
  • 17
  • 29

2 Answers2

2

I have found a solution/workaround to this.

  • In angular-cli.json I defined 2 apps: ltr and rtl.
  • under styles, each app compiles 2 different files:
    • directional-scss.scss and directional-scss-rtl.scss - with the $dir variable set to the correct value.
    • style-ltr.scss and style-rtl.scss - basically they are the same, but each one imports the correct directional-scss file.
  • In my package.json file, I added a script to build all: "build-all": "npm-run-all --parallel build-en build-i18n:he"
  • My build scipt looks like this: "build-en": "ng build --app=ltr --output-path=dist --aot -prod --bh / --locale=en-US", notice the --app=ltr. do the same in other languages build with the correct direction.

Thats it, I can now run this script and build both languages! or server them at the same time on different ports for dev and QA.

Shaniqwa
  • 1,924
  • 2
  • 17
  • 29
0

The only way is to modifying your build process to include a new import file defining this variable - it's not possible to access the environment variables directly from Sass code.

If you're using Webpack for example:

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

Of course, you'll be only able to change that configuration if you're using the configs directly (not with the Angular CLI) - or if you do an ng eject.

Edmundo Santos
  • 8,006
  • 3
  • 28
  • 38