时间戳

首页 > 解决方案 > Stylelint - 使 CSS 在子类定义之前出现

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

问题描述

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

解决方案

您可以使用插件包中的order规则来确保声明位于嵌套规则之前。stylelint-order

您需要先安装插件包：

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

推荐阅读