декабрь 15, 2017 · angular angular-cli

Упрощение импортов scss/less/styl в Angular 5

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

Предположим, у вас в проекте есть файл с переменными или миксинами, которые вы хотите добавить в файл стилей компонента. Часто можно видеть что-то такое:

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

Это полностью рабочее решение и редакторы хорошо справляются с исправлением путей при перемещении таких файлов. Но при создании/копировании все еще приходится "целиться" в нужную подкатегорию и это занимает драгоценное время.

С помощью includePaths можно это исправить и использовать простой способ:

@import "params.scss";

Настройка Angular CLI

Рассмотрим как настраивать Angular-cli.

Добавим в .angular-cli.json следующие строки:

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

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

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

Данный функционал работает с scss, less и styl файлами.

Настройка WebStorm

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

Чтобы это исправить в WebStorm, необходимо пометить папку src/styles, как "Resource root":

storm-resource-root

После этого файлы появлятся в списке для импорта:

storm-auto-complete

Настройка VSCode

Для правильной работы автодополнения установите плагин SCSS IntelliSense.

К сожалению, подсказки при импорте файлов данным плагином не поддерживаются, но все переменные и другие сущности будут доступны для автодополнения.

vscode-auto-complete


Больше информации о настройке глобальных стилей: https://github.com/angular/angular-cli/wiki/stories-global-styles

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