3

我正在尝试使用stylelint和stylelint-selector-bem-pattern插件对 BEM 样式进行 lint，但无法使其正常工作。

我的配置如下：

  • 节点：5.11.0
  • gulp-stylelint：^2.0.2
  • stylelint-selector-bem 模式：^0.2.3

.stylelintrc

{
    "plugins": [
        "stylelint-selector-bem-pattern"
    ],
    "rules": {
        "selector-bem-pattern": {
            preset: "suit"
        },
    },
    "extends": "@alienlebarge/stylelint-config",
}

和一个用于测试的 CSS 文件

.12ad2-asd--sad {
    color: rgba(255, 0, 0, .5);
}






#yeah {
    height: 10px;
}

@alienlebarge/stylelint-config我从插件而不是从插件中收到错误消息stylelint-selector-bem-pattern

src/assets/foehn/styles/foehn.css
 4:1  ✖  Unexpected empty line    max-empty-lines
 5:1  ✖  Unexpected empty line    max-empty-lines
 6:1  ✖  Unexpected empty line    max-empty-lines
 7:1  ✖  Unexpected empty line    max-empty-lines
 8:1  ✖  Unexpected empty line    max-empty-lines
 9:1  ✖  Unexpected empty line    max-empty-lines
 9:1  ✖  Unexpected id selector   selector-no-id
4

2 回答 2

3

Stylelint 插件只会在定义的组件上运行，在示例中并非如此。

如项目文档中所定义：

如果插件知道 CSS 的上下文，它只会对 CSS 进行 lint：它是实用程序还是组件。要定义上下文，请使用配置选项根据文件名 ( css/components/*.css) 定义它，或使用特殊注释为其后面的 CSS 定义上下文。定义组件时，需要组件名称。

您可以在以下位置隐式定义stylelintrc.json：

...,
implicitComponents: 'components/**/*.css',
...

或者在哪个组件上有评论MyComponent.css：

/** @define ComponentName */

.MyComponent {...}
于 2017-10-30T14:35:42.937 回答
2

从这里的代码来看，问题可能是您没有在 CSS 文件的顶部定义组件：https ://github.com/postcss/postcss-bem-linter#defining-a-component

于 2016-04-27T13:29:36.473 回答