CODEWITHSUNDEEP
angularsassangular-i18n
Shaniqwa
Shaniqwa

Reputation: 2074

set directional-scss variable at build time

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.

Upvotes: 4

Views: 788

Answers (2)

Shaniqwa
Shaniqwa

Reputation: 2074

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.

Upvotes: 2

Edmundo Santos
Edmundo Santos

Reputation: 8287

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.

Upvotes: 0

Related Questions