Search code examples
javascriptcssreactjssassstylelint

getting scss errors. how can i solve it?

Having these kinds of errors while running the react app. enter image description here

package.json file :->

"lint-staged": {
"linters": {
  "src/**/*.{js,jsx}": [
    "eslint --fix",
    "git add"
  ],
  "src/**/*.scss": [
    "stylelint --fix",
    "git add"
  ]
},
"ignore": [
  "**/dist/*.min.js"
]

}

how can we avoid these errors? Do I need to do any changes?

Solution

  • That's the expected behaviour. Stylelint is flagging violations where your SCSS deviates from the rules defined in your configuration object.

    As these are mostly stylistic violations, stylelint can automatically fix the majority of them for you using:

    npx stylelint "src/**/*.scss" --fix

    The 'Unexpected unit "em" for property "padding"' violation is not stylistic. You'll need to look at the options for the declaration-property-unit-whitelist rule in your configuration object to see what units are allowed for the padding property.