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是在编译时构建的，而不是运行时，因此无法实现您尝试这样做的目的。

我认为最好的方法是根据用户选择的语言更改类，然后根据该类设置webapp的样式。例如你的HTML：

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

和您的SCSS：

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

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

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

1 个答案: