Импорт переменных цвета S CSS в Angular компонент не работает

Question

Я создаю приложение Angular 9, и моя структура папок выглядит следующим образом:

| app
  | app.component.ts
  | app.component.html
  | app.component.scss
| assets
  | _colors.scss

В файле _colors.scss у меня определены два цвета:

$red: #DA0000;
$blue: #1080E1;

В app.component.scss я импортирую и использую цвета, подобные этому:

@import '../assets/colors';

.some-class {
  background-color: $blue;
}

Но это не работает, цвет не применяется. И ошибок нет. VSCode intellisense помогает мне с путем импорта, поэтому путь в порядке. Если я пытаюсь использовать не определенный цвет, такой как $black, я получаю сообщение об ошибке, поэтому кажется, что импорт работает, но цвет не применяется. Что мне здесь не хватает? Любые идеи? Заранее спасибо.

Answer 1

Вам необходимо добавить следующее в ваш проект в angular.json:

{
  "projects": {
    "YOUR_PROJECT_NAME": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/assets"]
            },
          }
        }
      }
    }
  }
}

Я рекомендую хранить его не в assets, а в чем-то вроде src/styles или src/scss, начиная с assets публикуется при сборке приложения. Вы на самом деле не хотите, чтобы люди могли видеть / получать доступ к необработанным s css файлам.

Затем вы можете импортировать их следующим образом:

@import '_colors';