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

【问题标题】：Choose different SCSS file according to a variable Angular 6 Typescript根据变量Angular 6 Typescript选择不同的SCSS文件
【发布时间】：2018-08-20 16:27:00
【问题描述】：

我有一个角度应用程序。此应用程序支持具有 rtl 和 ltr 布局的多种语言。布局将根据用户语言的变化而改变。

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

谢谢！

【问题讨论】：

标签： angular sass

【解决方案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>

stackblitz demo

【讨论】：

其实是个好主意。我认为它可以工作。这有点像一种解决方法，但可以一次性设置一个 redux 值并在整个应用程序中使用。

【解决方案2】：

您不能（或者，好吧，它没有意义）在运行时加载不同的 .scss 文件，因为它们首先需要编译为 CSS 才能在浏览器中工作。

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

其他选项包括：

对差异使用内联样式并通过绑定语法更改它们；例如。 [style.text-align]="direction";
使用custom properties确定文字方向；您可能还需要根据样式的性质使用conditional statements in CSS
如果您使用的是构建时 i18n（如果您为每种语言构建单独的应用程序，用户必须重新下载应用程序才能更改语言），只需为这些应用程序使用不同的 CSS 文件

【讨论】：

sass 导入不同于 css 导入，没有加载不同的 sass 文件，输出文件包含两个主题（rtl.ltr）并将捆绑为一个文件，您可以查看我的答案
他，我想，我应该同时加载它们。但我只能使用我需要的那个。但我会考虑到这一点。
@MuhammedAlbarmawi 我说的是避免加载这两种样式：即使只使用 LTR 的用户也需要下载 RTL 代码，这意味着他们将等待更长的时间才能看到应用程序，同时下载永远不会加载的代码用过。