我正在使用“ selector-class-pattern ” stylelint 规则。我使用的模式是强制执行ECSS命名标准。规则如下所示：
"selector-class-pattern": ["^[a-z]([a-z0-9]){1,3}-[A-Z][a-zA-Z0-9]+(_[A-Z][a-zA-Z0-9]+)?(-([a-z0-9-]+)?[a-z0-9])?$", { "resolveNestedSelectors": true }]
ECSS 类名使用 3 个部分（模块名、组件名、元素名），看起来像.mod-Component_Element {}wheremod是模块名的缩写。
我的 SCSS 文件保存在组件文件夹中，因此文件夹结构如下所示，其中app是模块的名称。
app
-- component-name
-- component-name.component.js
-- component-name.component.scss
我想要一个 stylelint 规则来确保模块和类名的组件部分与它们所在的文件夹匹配。因此，保存在示例component-name.component.scss文件中的类名将被限制在.app-ComponentName_ElementName {}哪里ElementName是可选的并且可以成为任何东西。
我正在使用 Gulp 运行 stylelint：
gulp.task('css', () => {
let processors = [
// add postcss processors here
];
return gulp.src([
path.join(gconfig.rootDir, 'vars.style.scss'),
path.join(gconfig.rootDir, 'style.scss'),
path.join(gconfig.rootDir, gconfig.rootModule, '**/*.scss'),
])
.pipe(stylelint({
failAfterError: false,
reporters: [ {formatter: 'string', console: true} ]
}))
.pipe(gif( debug, sourcemaps.init() ))
.pipe(cssimport())
.pipe(concat(`${gconfig.projectName}.style.css`))
.pipe(scss().on('error', scss.logError))
.pipe(postcss(processors))
.pipe(gif( debug, sourcemaps.write() ))
.pipe(gulp.dest(path.join(gconfig.outDir, 'css')))
});
我知道我可能需要为此编写一个插件，但想知道是否已经有类似这样的插件，或者是否有任何方法可以通过将文件名/文件夹从 Gulp 传递给 stylelint？