getting scss errors. how can i solve it?

Question

Having these kinds of errors while running the react app.

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?

Answer 1

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.