Stylelint

Question

stylelint 中是否有规则使 CSS 出现在任何子类定义之前？

我希望这样的内容无效：

.some-class {
  .some-sub-class {
    background: red;
  }
  border: 1px;
}

我希望这是正确的。

.some-class {
  border: 1px;
  .some-sub-class {
    background: red;
  }
}

我的 stylelint 设置非常基础，文件 .stylelintrc 仅包含以下内容：

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

有谁知道我在 stylelint 上尝试做的事情是否有规则？

Answer 1

您可以使用 order rule in the stylelint-order plugin pack 来确保声明出现在嵌套规则之前。

您需要先安装插件包：

npm i --save-dev stylelint-order

然后更新您的配置对象：

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/order": [
      "declarations",
      "rules"
    ]
  }
}

Stylelint - 使 CSS 出现在子类定义之前

Stylelint - Making CSS Appears Before Subclass Definition