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

Question

我在 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';

Answer 1

由于 SASS 是在编译时构建的，而不是运行时，你无法通过这种方式实现你想要做的事情。

我认为最适合您的方法是根据用户选择的语言更改 class，然后根据 class 设置您的 Web 应用程序的样式。例如你的 HTML:

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

和您的 SCSS：

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

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

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

How change import scss based on current selected language with Angular

javascript

css

sass

angularjs

angular-translate