Search code examples
javascriptcssangularjssassangular-translate

How change import scss based on current selected language with Angular

I'm using angular-translate in my Angular application.

And I want to change the importing scss files based on the current selected languge

@import 'partials/reset';
@import 'partials/variables_ar';     <--------- OR
@import 'partials/variables_en';     <--------- Based on  $translate.use();
@import 'partials/mixins';
@import 'partials/angular-material-extend';
@import 'partials/layouts-template';
@import 'partials/layouts-page';
@import 'partials/animations';
@import 'partials/colors';
@import 'partials/icons';
Solution

  • Since SASS is built at compile time, not run time, you can't achieve what you're trying to do that way.

    I think the best approach for you is to change the class based on the user's selected language, and then style your webapp depending on that class. For example your HTML:

    <body class="{{ languageCode }}">
  <header>My Header</header>
</body>

    and your SCSS:

    body.en {
  header { color: blue; }
}

body.fr { 
  header { color: red; }
}