我正在尝试使用 stylelint 对 BEM 样式进行 lint和 stylelint-selector-bem-pattern
plugin但无法让它工作。
我的配置如下:
- 节点:5.11.0
- gulp-stylelint:^2.0.2
- stylelint-selector-bem-pattern: ^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
plugin
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
最佳答案
Stylelint 插件只会运行在已定义的组件上,在示例中并非如此。
定义在 project documentation :
The plugin will only lint the CSS if it knows the context of the CSS: is it a utility or a component. To define the context, use the configuration options to define it based on the filename (
css/components/*.css
) or use a special comment to define context for the CSS after it. When defining a component, the component name is needed.
您可以在 stylelintrc.json
中隐式定义:
...,
implicitComponents: 'components/**/*.css',
...
或者在 MyComponent.css
中添加注释的组件:
/** @define ComponentName */
.MyComponent {...}
关于css - 如何使用 stylelint 和 stylelint-selector-bem-pattern 来 lint BEM 风格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36889258/