Блог

У меня есть этот оператор импорта в моем проекте

 @import "./assets/sass/style.angular.scss";
 

Как я могу изменить путь на основе переменной. Я хочу, чтобы он менялся, когда пользователь меняет язык проекта на арабский, используя этот путь

 @import "./assets/sass/style.angular.RTL.css";
 

Это не встроенная функциональность angular, но вы всегда можете добавить класс в свой файл app.component на основе языка или тега данных. Что-то вроде этого:

 @Component({
    templateUrl: 'app.component.html',
    selector: 'app-component
})
export class AppComponent {
    @HostBinding('attr.data-lang') language: string = "en";
}
 

затем в вашем файле style.angular.RTL.css вы должны добавить в свои селекторы префикс [data-lang=»arabic», чтобы он включался всякий раз, когда языковая переменная была установлена на арабский.

Если вам нужно if-else внутри .scss файла, вы можете проверить этот подход

 // Define a mixin to import what file needs to be imported

@mixin importRightScssFile($firstUrl: true) {

  @if $firstUrl {
    @import('path/to/your/first-url.scss');
  } @lse {
    @import('path/to/your/second-url.scss');
  }
}

// Whenever you want you can simply use this **mixin** to load whatever URL you want like this: 

.first-url-class {
 @include importRightScssFile($firstUrl: true);
}

.second-url-class {
 @include importRightScssFile($firstUrl: false);
}