如何在Angular中根据当前选择的语言更改导入scss

How change import scss based on current selected language with Angular

本文关键字：语言 选择 scss 导入 Angular      更新时间：2023-09-26

我在我的Angular应用中使用了Angular -translate。

我想根据当前选择的语言更改导入的scss文件

@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';

由于SASS是在编译时构建的，而不是运行时，因此您无法实现您想要做的事情。

我认为对你来说最好的方法是根据用户选择的语言来改变类，然后根据这个类来设计你的web应用程序。例如你的HTML:

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

和你的SCSS:

body.en {
  header { color: blue; }
}
body.fr { 
  header { color: red; }
}
相关文章：