DEV.NVX.ME

Angular & TypeScript

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

| версия Angular: 5
style-imports-preview.png

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

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

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

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

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

1
@import "params.scss";

Настройка Angular CLI

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

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

1
2
3
4
5
6
7
8
9
10
11
12
{
"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.png

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

storm-auto-complete.png

Настройка VSCode

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

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

vscode-auto-complete.png

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


Задавайте вопросы или делитесь своими идеями в комментариях.

Также подписывайтесь на мой twitter и спасибо за внимание!

Proudly powered by Hexo and Theme by Hacker
© 2018 Sasha Novik