将stylelint与角度构建集成，并使其在出错时失败？

Question

例如，我想在有角度的应用程序中使用stylelint来强制执行类名（如果需要，它们应该使用小写字母和破折号，而不是驼峰或大写字母。）

如何配置stylelint以在Angular构建时运行（就像Angular运行TSLint）。还是TSLint可以实施样式规则？

建议是当我在stylelint规则中有错误时，Angular构建将失败。

Answer 1

根据stylelint的文档，您可以将selector-class-pattern与烤肉串样式^([a-z][a-z]*)(-[a-z]+)*$结合使用。此模式仅允许小写字母和这些字母之间的破折号。如果您还希望允许数字，则可以对每个以字母开头的字母数字组使用此^([a-z][a-z0-9]*)(-[a-z0-9]+)*$。

如果需要，您还可以查看resolveNestedSelectors的selector-class-pattern选项。

您可以像stylelint-config.json一样在this文件中使用它，

"selector-class-pattern": ["^([a-z][a-z]*)(-[a-z]+)*$", {
   "resolveNestedSelectors": false
}

或只是

"selector-class-pattern": "^([a-z][a-z]*)(-[a-z]+)*$"

我希望它可以帮助：）

编辑：根据此article，为了与angular build集成，可以在package.json中使脚本看起来像这样：

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "npm run lint && ng build",
    "test": "ng test",
    "lint": "ng lint && npm run lint:styles",
    "lint:styles": "stylelint \"apps/**/*.scss\" && stylelint \"libs/**/*.scss\"",
    "e2e": "ng e2e"
  },