Импорт глобальных переменных в Angular с помощью SCSS

В Angular вы можете использовать SCSS (Sass) для определения глобальных переменных, к которым можно получить доступ во всем вашем приложении. Это позволяет централизовать конфигурацию стилей и повторно использовать стили в нескольких компонентах. В этой статье блога мы рассмотрим несколько методов импорта глобальных переменных в SCSS с помощью Angular, попутно предоставляя примеры кода.

Метод 1: импорт файла SCSS в таблицу стилей Angular

Один из способов импортировать глобальные переменные — создать отдельный файл SCSS, содержащий определения переменных. Допустим, у вас есть файл с именем _variables.scss, который определяет ваши глобальные переменные:

$primary-color: #FF0000;
$secondary-color: #00FF00;

Чтобы импортировать эти переменные в приложение Angular, выполните следующие действия:

1. Создайте новый файл SCSS (например, styles.scss) в папке srcвашего проекта Angular.
2. Внутри styles.scssимпортируйте файл _variables.scss:

@import 'variables';

3. Обязательно добавьте файл styles.scssв массив stylesв файле angular.json:

"styles": [
  "src/styles.scss"
],

Теперь вы можете использовать глобальные переменные, определенные в _variables.scss, во всех компонентах Angular.

Метод 2: использование опции глобальных стилей Angular CLI

Angular CLI предоставляет опцию глобальных стилей, которая позволяет импортировать глобальные таблицы стилей во все ваше приложение. Вот как вы можете использовать этот метод:

1. Создайте новый файл SCSS (например, global-styles.scss), содержащий глобальные переменные и стили.
2. Откройте файл angular.jsonв своем проекте Angular.
3. Найдите раздел проектыи найдите конфигурацию своего проекта.
4. Внутри конфигурации проекта добавьте свойство stylesс путем к вашему файлу global-styles.scss:

"architect": {
  "build": {
    "options": {
      "styles": [
        "src/global-styles.scss"
      ]
    }
  }
}

При использовании этого метода файл global-styles.scssбудет автоматически импортирован и применен ко всем компонентам вашего приложения Angular.

Метод 3: создание общего файла SCSS

Другой подход — создать общий файл SCSS, содержащий ваши глобальные переменные и примеси. Вот пример:

1. Создайте новый файл SCSS (например, shared.scss) в общей папке (например, src/app/shared).
2. Внутри shared.scssопределите глобальные переменные:

$primary-color: #FF0000;
$secondary-color: #00FF00;

3. В файле SCSS каждого компонента, где вы хотите использовать глобальные переменные, импортируйте файл shared.scss:

@import '../../shared/shared';

Этот метод позволяет вам лучше контролировать, какие компоненты используют глобальные переменные.