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

【问题标题】：How change import scss based on current selected language with Angular如何使用 Angular 根据当前选择的语言更改导入 scss
【发布时间】：2017-03-09 10:00:07
【问题描述】：

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

【问题讨论】：

我不认为你可以这样做，因为 $translate 代码在运行时获取和设置语言，而这些 scss 文件在构建时被处理并转换为 css。
那么，有什么方法或想法可以做这样的事情吗？

标签： javascript css angularjs sass angular-translate

【解决方案1】：

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

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

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

和你的 SCSS：

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

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

【讨论】：