Глобальные переменные scss для компонентов Angular без их постоянного импорта

Is there any ways to make global file with scss variables available for all components?

Без импорта глобального файла каждый раз в каждом компоненте вы хотите, чтобы эти sass-переменные были доступны, это невозможно.

Как это работает в SASS, при использовании частичных кодов для лучшей организации кода вы можете применить директиву @import для ссылок. Итак, если в shared/_variables.scss есть какие-то переменные sass:

$lightslategray: #778899;
$darkgray: #A9A9A9;

и эти переменные нужно использовать в другой таблице стилей, таблица стилей с ними должна быть сначала @import-ed в нее:

// Shared
@import "shared/variables";

.content {
  background: $lightslategray;
}

В Angular это работает аналогичным образом (связанная ссылка на внешнюю таблицу стилей). Поэтому, если вам нужно, чтобы какие-то sass variables, mixins or functions использовались конкретным component.scss, нет другого простого способа, кроме как сослаться на них в этом component.scss с помощью директивы @import. Чтобы упростить задачу, вы можете создать файл src/_variables.scss и использовать такой синтаксис в своем component.scss:

@import “~variables.scss”;

Вам просто нужно добавить немного больше конфигурации, поэтому, когда вы объявляете свои глобальные переменные, вам нужно обернуть их в :root{}. Итак в src/styles/settings/_variables.scss.

:root 
{
--blue: #00b; // or any global you wish to share with components 
}

Затем, когда вы используете их в SCSS, вам нужно будет получить к ним доступ следующим образом.

.example-class {
  background-color: var(--blue)
}

Чтобы добавить к этому комментарии, этот метод может использовать mixins, @media и keyframes и не ограничивается только цветами/шрифтом. Это был пример.

Насколько я понимаю, вам нужен глобальный файл src/assets/style/global, а затем импортировать каждый файл scss туда, где вы определяете их таким образом.

@import 'filename';

Если вы не хотите, чтобы глобальные переменные использовались внутри компонента, посмотрите, когда у вас работают глобальные переменные. Посмотрите на ViewEncapsulation, так как это можно использовать для их игнорирования.

В angular 8 у меня работает.

В вашем файле _variable.scss вы должны добавить:

:root{--my-var:#fabada}

После этого перейдите в свой угловой.json и добавьте это в "стили":.

{"input":"yourPath/_variables.scss"}

шаг первый: перейдите в пользовательский файл scss (shared/css/_variable.scss) и напишите эту часть

:root{
  --color-text: red;
  --color-btn-success: green;
}

после перейдите в style.scss (это основной файл) и импортируйте этот файл:

@import './shared/css/Variables';

теперь вы можете использовать переменные во всех компонентах с этим синтаксисом:

.sample{
  color : var(--color-text);
}

Легко получить доступ к стилям sass из глобального файла. с двумя шагами.

1. Добавьте путь к папке файлов стилей в массив includePaths в файле angular.json.

• 2. Импортируйте файл стиля по имени файла в любом компоненте.

angular.json

"architect": {
  "build": {
    ...
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/styles/var" // add path only, do not include file name
        ]
      },
      "styles": [
        ...
      ]
    }
    ...
  }
}

some-component.scss

@import "var";

mat-toolbar {
  height: $toolbar-height;
}