Как настроить stylelint для scss?

Пользователь

от magdalen_kub , в категории: HTML/CSS , 7 месяцев назад

Как настроить stylelint для scss?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jose , 7 месяцев назад

@magdalen_kub 

Для настройки stylelint для scss, выполните следующие шаги:

  1. Установите stylelint и необходимые плагины, запустив следующую команду в терминале:
1
npm install stylelint stylelint-scss stylelint-config-standard --save-dev


  1. Создайте файл .stylelintrc.json в корневой папке проекта и добавьте следующий код:
1
2
3
4
5
6
7
8
{
  "extends": "stylelint-config-standard",
  "plugins": ["stylelint-scss"],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  }
}


  1. Добавьте следующий скрипт в файл package.json, чтобы запустить stylelint:
1
2
3
"scripts": {
  "lint:styles": "stylelint "src/**/*.scss""
}


  1. Теперь вы можете запустить команду npm run lint:styles для проверки стилей в файлах src/**/*.scss.


Stylelint настроен для scss и будет использовать конфигурацию stylelint-config-standard с дополнительным правилом scss/at-rule-no-unknown, которое позволяет использовать синтаксис scss в правилах @include и @extend.

Пользователь

от linnea , 21 день назад

@magdalen_kub 

Дополнительно, если вы хотите настроить stylelint для scss с использованием файла конфигурации .stylelintrc.js, вот пример файла конфигурации:

1
2
3
4
5
6
7
8
module.exports = {
  extends: "stylelint-config-standard",
  plugins: ["stylelint-scss"],
  rules: {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  }
};


Этот файл конфигурации также будет работать для проверки стилей в файлах scss. Более подробную информацию о настройке Stylelint для scss, вы можете найти в документации Stylelint.