在 grunt 文件中
stylelint: {
all: ['app/styles/**/*.scss']
},
.stylelintrc
{
"plugins": [
"stylelint-selector-bem-pattern"
],
"rules": {
"plugin/selector-bem-pattern": {
"componentName": "[A-Z]+",
"componentSelectors": {
"initial": "^\\.{componentName}(?:-[a-z]+)?$",
"combined": "^\\.combined-{componentName}-[a-z]+$"
},
"utilitySelectors": "^\\.util-[a-z]+$"
}
}
}
/Users/jitendravyas/app-test/styles/components/_campaign-settings-integrations.scss
/* @define campaign-settings */
.campaign-settings__integrations {
@include flex;
}
.campaign-settings__integration {
border: 1px solid $color-green;
border-radius: 3px;
color: $color-green;
margin-right: $base-spacing-unit;
@include flex;
.check {
background: $color-green;
color: white;
@include vertical-center;
}
> div {
padding: $half-spacing-unit;
}
}
运行 stylelint 时没有收到任何错误。 Stylelint 正在使用其他规则。
最佳答案
我相信您错误地定义了组件名称。因此,linter 正确地跳过了该文件。
你must use 简洁或详细语法:
/** @define campaign-settings */
或
/* postcss-bem-linter: define campaign-settings */
目前您似乎使用了无效的简洁语法,即您的评论以 /*
开头,而不是 /**
.
关于gruntjs - stylelint-selector-bem-pattern BEM linter 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43254007/