Как подключить глобально файл с scss-переменными?

Question

[zlodiak]

В моём проекте есть файл /src/styles.scss . В нём содержатся стили, которые видны из любой части проекта. Это происходит потому что путь к этому файлу прописан в конфиге angular-cli:

....
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "aw",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
....

Я создал файл /src/vars.scss и поместил в него несколько переменных, которые тоже хочу использовать в любой части проекта:

$basic-color: blue;
$accent-color: red;
$unactive-color: #ccc;

Для этого я изменяю конфиг так:

....
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "aw",
      "styles": [
"vars.scss",
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
....

и пересобираю проект. Но ничего не происходит - то есть я не могу использовать scss-переменные из любой части рпоекта. Помогите пожалуйста решить проблему.

Пока временно я решил проблему так: в начале каждого scss-файла проекта я прописываю
@import "~vars.scss";

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

Answer 1

[Айнур Валиев]

в самом файле "styles.scss" делай импорт через нижнее подчеркивание как
"_vars.scss" - файл с переменными конкатенируется.

Comments

[zlodiak]

Пробовал так. Но в этом случае в консоль валятся ошибки, связанные с тем, что scss-файлы компонентов не понимают переменных из _vars.scss

[Айнур Валиев]

zlodiak, подключай в начале, до компонентов