stylelint-config-prettier-scss

1.0.0 verified Sat Apr 25 auth: no javascript

Shareable stylelint config that disables all SCSS rules that conflict with Prettier, extending stylelint-config-prettier. Forked from stylelint-config-prettier to specifically handle SCSS rules. Current version 1.0.0 requires stylelint >=15.0.0 and Node 14, 16, or >=18. Key differentiator: allows using Prettier alongside stylelint without clashes, with a built-in CLI helper to verify configuration. Actively maintained alongside Prettier ecosystem.

Common errors

error Configuration for rule "scss/at-rule-no-unknown" is invalid ↓

cause stylelint-config-prettier-scss disables SCSS rules that may conflict with Prettier; some earlier version might not have covered this rule.

fix

Ensure you have the latest version (1.0.0) and that stylelint-config-prettier-scss is last in extends.

error Cannot find module 'stylelint-config-prettier-scss' ↓

cause The package is not installed or is not resolvable by stylelint.

fix

Run 'npm install --save-dev stylelint-config-prettier-scss' and check that it is in node_modules.

error Unknown CLI command: stylelint-config-prettier-scss ↓

cause User tried to run 'npx stylelint-config-prettier-scss' instead of the correct CLI tool.

fix

Run 'npx stylelint-config-prettier-scss-check' instead.

error Invalid option for "extends". Expected an array of strings. ↓

cause Stylelint config file had extends as a string instead of an array.

fix

Use 'extends: ["stylelint-config-prettier-scss"]' (array) instead of 'extends: "stylelint-config-prettier-scss"'.

Warnings

breaking Drops use of stylelint-config-prettier to align with Stylelint v15 deprecation of stylistic rules ↓

fix If you need to disable stylistic rules beyond SCSS, install and extend stylelint-config-prettier directly in addition to stylelint-config-prettier-scss.

deprecated stylelint-config-prettier itself now only disables rules from stylelint-config-standard, not stylistic rules (removed in v15) ↓

fix Use stylelint-config-prettier only if you need to disable non-SCSS rules from stylelint-config-standard; for SCSS-specific, use stylelint-config-prettier-scss.

gotcha Must be placed last in the extends array to properly override other configs ↓

fix Always put 'stylelint-config-prettier-scss' at the end of the extends array.

gotcha Only disables SCSS rules; CSS-only rules from other configs may still conflict ↓

fix Also extend 'stylelint-config-prettier' if you need to disable CSS stylistic rules.

Install

npm install stylelint-config-prettier-scss

yarn add stylelint-config-prettier-scss

pnpm add stylelint-config-prettier-scss

Imports

config
wrong
```
require('stylelint-config-prettier-scss')
```
correct
```
extends: ['stylelint-config-prettier-scss']
```
This is a stylelint config, not a JavaScript module; use in .stylelintrc or stylelint.config.js via extends array.
CLI helper
wrong
```
npx stylelint-config-prettier-scss
```
correct
```
npx stylelint-config-prettier-scss-check
```
The CLI command is stylelint-config-prettier-scss-check, not the package name.

stylelint config

wrong

module.exports = { plugins: ['stylelint-config-prettier-scss'] }

correct

module.exports = { extends: ['stylelint-config-prettier-scss'] }

Config should be in extends, not plugins.

Quickstart

Example .stylelintrc.json that applies standard CSS and SCSS configs, then overrides with Prettier-compatible SCSS rules.

// .stylelintrc.json
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-config-prettier-scss"
  ]
}