грудень 15, 2017 · angular angular-cli

Спрощення імпорту scss/less у Angular 5

Це проста, але дуже зручна фіча, яку часто незаслужено ігнорують.

Припустимо, у вас в проекті є файл зі змінними або міксини, які ви хочете додати в файл стилів компонента. Часто можна бачити щось таке:

@import "../../../../params.scss";

Це повністю робоче рішення та IDE добре справляються з виправленням шляхів при переміщенні таких файлів. Але при створенні/копіюванні все ще доводиться "цілитися" в потрібну підкатегорію і це займає дорогоцінний час.

За допомогою includePaths можна це виправити і використовувати простий спосіб:

@import "params.scss";

Налаштування Angular CLI

Додамо в .angular-cli.json наступні рядки:

{
  "apps": [
    {
      ...
      "styles": [
        "styles.css",
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "styles"
        ]
      },

Важлива секція stylePreprocessorOptions, в ній ми вказали, що в папці src/styles буде проводиться пошук для імпорту.

Тепер додамо файл src/styles/params.scss і, якщо в будь-якому файлі стилів ми напишемо @import "params.scss", помилки не буде і всі стилі/функції/параметри будуть доступні для використання.

Даний функціонал працює з scss та less файлами.

Налаштування WebStorm

Так як тепер шлях до імпортованих файлів вказано неявно, то IDE не може коректно доповнюватти значення і підсвічувати помилки.

Щоб це виправити в WebStorm, необхідно позначити папку src/styles, як "Resource root":

storm-resource-root

Після цього файли з’являться у списку для імпорту:

storm-auto-complete

Налаштування VSCode

Для правильної роботи автодоповнення встановіть плагін [SCSS IntelliSense] (https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).

На жаль, підказки шляху до файлів при імпорті даними плагіном не підтримуються, але всі змінні будуть доступні для автодоповнення.

vscode-auto-complete


Більше інформації про налаштування глобальних стилів: https://github.com/angular/angular-cli/wiki/stories-global-styles

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket