Доступ к scss-параметрам начальной загрузки в angular 2 компонентах

Я работаю над новым проектом Angular2, созданным с помощью Angular CLI, и настроил проект на использование SCSS. У меня есть Bootstrap 4, успешно загруженный в мой файл styles.scss, однако, если я пытаюсь получить доступ к любому из Bootstrap (или моим собственным переменным, определенным в styles.scss) изнутри компонента, я получаю ошибку сборки Undefined Variable.

Являются ли файлы стиля для компиляции компонентов перед основной записью в styles node из angular-cli.json? Как я могу сделать так, чтобы любые переменные, определенные на этом глобальном уровне, были доступны всем компонентам приложения? Спасибо!

angular -cli.json

"apps": [
  {
    ...
    "styles": [
      "styles/styles.scss"
    ],
    ...
  }
]

styles.scss

// Bootstrap
$enable-flex: true; // Enable Flexbox mode
@import "../../node_modules/bootstrap/scss/bootstrap";

компонент

.navbar {
  background: $brand-primary; // Undefined variable here
}

ОТВЕТЫ

Ответ 1

Просто потому, что вы импортируете bootstrap 4 в свой styles.scss, не означает, что ваши файлы .scss на ваших компонентах имеют к этому доступ.

На вашем component.scss вам нужно импортировать переменные бутстрапа.

@import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary; // No more Undefined variable here
}

Описание

Мне кажется, что многие люди смущены этим, вам не следует импортировать bootstrap.scss на ваши компоненты, вы должны импортировать только то, что вам нужно.

Если вы внимательно посмотрите на исходный код bootstrap.scss, то все они разделены в разных файлах. У вас есть папка mixins и файл _variables.scss. Это должны быть единственные вещи, которые вы импортируете на свой компонент, чтобы избежать дублирования css.

Будет ли это увеличивать размер моего пакета, импортируя эти вещи на каждый компонент?

Нет, не будет, почему? mixins и variables являются специфичными для sass (по крайней мере, сейчас), поэтому, когда вы импортируете все переменные в свой компонент следующим образом:

@import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary;
}

вывод css этого будет:

.navbar {
  background: #007bff;
}

Остальные переменные будут отброшены после компиляции в css.

Ответ 2

Несколько человек предложили @import -вставить variables.scss в каждый компонент .scss, но я нашел это немного грязным. Это не так хорошо работает с архитектурой нашей компании. Я закончил работу в этом направлении, чтобы позволить мне использовать переменные, mixins, а также расширять стили. Это также позволяет мне управлять всеми CSS в одном месте.

В настоящее время я работаю над проектом, созданным с помощью Angular2 CLI. Итак, есть основной стиль. Scss

Еще один способ, которым я смог это сделать, - сделать следующее:

  • Удаление styleUrls из файлов app.component.ts.

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
    // styleUrls: ['./app.component.scss']
});

  • Я управляю всеми меньшими файлами в главном styles.scss. Итак, моя текущая настройка выглядит примерно так:

    // Bootstrap
@import "../node_modules/bootstrap-less/bootstrap/index";

// Company Branding
@import "theme/index";

// Components
@import "app/app.component.scss";
@import "app/search/search.component.scss";

Надеемся, что это альтернативное решение будет полезно кому-то.

Ответ 3

Создайте файл _colors.scss, скопируйте все цветовые переменные внутри и импортируйте этот файл в файл component.scss.