Блог

У меня уже есть переменные SCSS, определенные в src/styles/settings/_variables.scss , и я импортирую их в src/styles.scss , но все еще эти переменные доступны не для каждого отдельного компонента.

Есть ли какой-либо способ создать глобальный файл, который содержит все переменные SCSS для остальных моих компонентов? Потому что запись @import в каждый отдельный компонентный .scss файл очень расстраивает, особенно если у меня много вложенных компонентов.

Я знаю, есть много похожих вопросов, но похоже, что все они устарели и не относятся к последним версиям Angular.

Я использую Angular 7.3 с CLI.

Вам просто нужно добавить немного больше конфигурации, поэтому там, где вы объявляете свои глобальные переменные, вам нужно обернуть это в :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, поскольку это может использоваться для их игнорирования.

Есть ли какие-либо способы сделать глобальный файл с переменными scss доступным для всех компонентов?

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

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

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

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

 // Shared
@import "shared/variables";

.content {
  background: $lightslategray;
}
  

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

 @import “~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. Импортируйте файл стиля по имени файла в любом компоненте.

допустим, ваши структуры файлов и папок выглядят следующим образом: src > my-styles-folder > var.scss

angular.json

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

some-component.scss

 @import "var"; // var.scss

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

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

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

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

После этого зайдите в свой angular.json и добавьте это в «стили»:

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

В каждом компоненте angular вы можете использовать переменные из файлов:

 @use "/src/styles/settings/variables" as *;
  

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