#4 Gulp сборка проекта | sass, stylelint

Материалы урока

npm i gulp-sass gulp-autoprefixer gulp-group-css-media-queries gulp-clean-css stylelint stylelint-config-standard stylelint-scss stylelint-order stylelint-config-rational-order --save-dev

Ссылки урока

Связь со мной
Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик.
На канале делюсь знаниями по веб-разработке.

#sass #scss #styelint

Таймкоды:
0:00 Интро
0:13 gulp-sass
3:38 gulp-autoprefixer
5:39 gulp-group-css-media-queries
6:29 gulp-clean-css
7:54 gulp-rename
8:50 gulp-sourcemaps
12:09 stylelint
14:01 stylelint-order
17:05 Добавляем stylelint в lint-staged

[Фронтендер-зо]

Таймкоды:
0:00​ Интро
0:13​ gulp-sass
3:38​ gulp-autoprefixer
5:39​ gulp-group-css-media-queries
6:29​ gulp-clean-css
7:54​ gulp-rename
8:50​ gulp-sourcemaps
12:09​ stylelint
14:01​ stylelint-order
17:05​ Добавляем stylelint в lint-staged

[EugeneKh.]

На странице stylelint-scss npm-пакета есть ремарка, что лучше использовать stylelint-config-standard-scss, который уже включает в себя оный, если вы не собираете набор правил с нуля под свои цели, т.к. там нет танцев с бубном с ошибками эт-рулов. Также предостерегу, что расширение stylelint может не подсвечивать ошибки сразу после установки, стоит внести правки файл с настройками IDE, а именно:
"css.validate": false, - отключает нативную валидацию
"scss.validate": false, - // -
"stylelint.validate": [
"css",
"scss",
] - правила для стайлинта какие языки линтировать
Все это применимо и к другим css-подобным языкам.
Для тех, кто любит заморочится (Как я), стоит еще дописать правила порядка очередности вложенных выражений ( типа медиа - модификаторы по бэм - псведоклассы - псевдоэл-ты.. и т.д.)
Хорошей практикой будет запретить переопределение селекторов в медиа запросах, установить макс глубину нестинга

А супер круто сделать два конфига под линтер, один который будет проверять только те правила, которые требуют ручного исправления и использоать его по дэфолту, а для хаски сдлеать extended, который запускать с фагом --fix и он будет не только линтить по расширеному набору правил, но и фиксить очередность css-правил

[onthelimit]

Спасибо, всё было очень круто до sass, но придётся отказаться от вашей сборки из-за невозможности подключения sass, в доках подключение сейчас выглядит так: var sass = пытался лечить, не получается. Пробовал
import gulpSass from "gulp-sass";
import nodeSass from "node-sass";
const sass = gulpSass(nodeSass);
Не помогло. Вот такая ошибка (npm ERR! code ELIFECYCLE
npm ERR! errno 1), как я понимаю - это нода ругается. Дальше мои полномочия всё

[constantinem.]

Привет! Скажи, есть ли какой-нибудь инструмент для scss, который может упорядочить свойства в правильном порядке?