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

【问题标题】：Stylelint - Making CSS Appears Before Subclass DefinitionStylelint - 使 CSS 在子类定义之前出现
【发布时间】：2021-10-07 12:40:50
【问题描述】：

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 上尝试做的事情是否有规则？

【问题讨论】：

标签： stylelint

【解决方案1】：

您可以在stylelint-order plugin pack 中使用order rule 来确保声明位于嵌套规则之前。

您需要先安装插件包：

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"
    ]
  }
}

【讨论】：