如何使用基于缩进的SASS？

Question

我正在尝试为我的项目添加SugarSS的linting。我已经在我的package.json中添加了lint-staged命令：

  "scripts": {
    "lint-staged": "$(yarn bin)/lint-staged"
  },
  "lint-staged": {
    ...
    "app/assets/styles/**/*.sass": [
      "prettier --write",
      "stylelint --fix --syntax sugarss",
      "git add"
    ]
  }

当我运行npm run lint-staged时，它输出

✖ prettier --write found some errors. Please fix them and try committing again.


[error] path/to/style.sass: SyntaxError: Unexpected token, expected ";" (3:16)
[error]   1 | h1.question
[error]   2 |   overflow: visible
[error] > 3 |   padding-right: 12px
[error]     |                ^
[error]   4 |   color: #333
[error]   5 |
[error]   6 | #questions h4
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my_project@1.0.0 lint-staged: `$(yarn bin)/lint-staged`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my_project@1.0.0 lint-staged script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

似乎eslint试图用新的SASS 3语法来连接我的path/to/style.sass

如何在package.json中为SugarSS语法设置linting？谢谢

Answer 1

我可以使用以下设置为SugarSS设置linting：

# .stylelintrc
{
  "extends": "stylelint-config-sugarss-recommended"
}

在package.json中

{
  "devDependencies": {
    "stylelint-config-sugarss-recommended": "^1.1.0"
    ...
  },
  "scripts": {
    "lint-staged": "$(yarn bin)/lint-staged"
  },
  "lint-staged": {
    "app/assets/styles/**/*.sass": [
      "stylelint --fix --syntax sugarss",
      "git add"
    ],
    ...
  },
  "pre-commit": [
    "lint-staged"
  ]
}