Set directional-scss variable during build
I am using angular to build a multilingual system with angular i18n for internalization. I need to build each language as a different package. Since some languages ββare RTL, I use directed scss (instead of importing different stylesheets or applying class=rtl
to elements).
The problem is I don't want to change the code before every build. I only need to change one simple line in the scss variable file:
$dir = ltr
to $dir = rtl
in RTL languages.
Is it possible to extract this value from the build script or something else? which will create a much smoother build process.
source to share
I found a solution / workaround for this.
- In
angular-cli.json
I have defined 2 applications: ltr and rtl. - under styles, each app is 2 different files:
-
directional-scss.scss
anddirectional-scss-rtl.scss
- with is$dir
set to the correct value. -
style-ltr.scss
andstyle-rtl.scss
- they are basically the same, but each imports the correct directed 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 script looks like this:
"build-en": "ng build --app=ltr --output-path=dist --aot -prod --bh / --locale=en-US"
take a look at the--app=ltr
. do the same in other languages, building in the right direction.
There it is, now I can run this script and build both languages! or servers at the same time on different ports for dev and QA.
source to share
The only way is to change the build process to include a new import file that defines this variable - you can't access environment variables directly from Sass code.
If you are using Webpack for example:
https://github.com/webpack-contrib/sass-loader#environment-variables
Of course, you will only be able to change this config if you are using the config directly (not with the Angular CLI) - or if you do ng eject
.
source to share