根据变量Angular 6 Typescript选择不同的SCSS文件

Question

我有一个angular应用程序。这个应用程序支持多种语言的rtl和ltr布局。布局将根据来自用户的语言的改变而改变。

我有两个SCSS文件，每个方向一个。我想根据变量的值来加载其中的一个。我迷路了，我不知道我到底应该在哪里做。解决此类问题的最佳实践是什么？

谢谢!

Answer 1

您可以创建一个类标志，如rtl，ltr，并在类的主体中导入选定的主题(scss文件)，这意味着当类呈现特定主题时将应用该主题。

_ltr.scss

h1 {
  background: #4285f4;
  color:#fff;
  text-align: left;
}

_rtl.scss

h1 {
  background: #ea4335;
  color:#fff;
  text-align: right;
}

style.scss

.rtl {
 @import "theme/_rtl.scss"
}

.ltr {
 @import "theme/_ltr.scss"
}

编译的style.scss

.rtl h1 {
    background: #ea4335;
    color: #fff;
    text-align: right
}

.ltr h1 {
    background: #4285f4;
    color: #fff;
    text-align: left
}

app.component.html

<div>Selected theme :
    <select [(ngModel)]="selectedTheme"> 
    <option value="rtl">RTL</option>
    <option value="ltr">LTR</option>
  </select>
</div>

<div [class]="selectedTheme">
    ....
</div>

Answer 2

您不能在运行时加载不同的.scss文件，因为它们首先需要编译成CSS才能在浏览器中工作。

另一个答案显示了通过bundling both versions of styles为这两种布局执行此操作的方法，但根据您的代码组织，这可能会导致大量重复，这可能并不理想。

其他选项包括：

• 使用内联样式来区分这些差异，并通过绑定语法来更改它们。[style.text-align]="direction";
• use custom properties以确定文本深度；如果您正在使用构建时i18n (如果您正在按语言构建单独的应用程序，用户必须重新下载该应用程序以更改语言)，则您可能还需要根据样式的性质使用
• ，只需对这些应用程序使用不同的i18n文件