从带有样式棉绒的 lint 中排除导入的供应商文件

Question

我想使用 stylelint 正确排除导入的供应商文件。我有这个app.scss：

@import '~bootstrap';
@import '~bootstrap-vue';
body {
background: gray;
}

而这个.stylelintrc.json：

{
"extends": "stylelint-config-standard"
}

在编译期间(使用 Webpack Encore)，我收到超过 8000 条警告，例如：

warning  in ./assets/scss/app.scss
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning
(9998:1) Expected selector ".input-group-sm > .custom-range" to come before selector ".input-group > .form-control-plaintext + .custom-range" (no-descending-specificity)

我想要的是 0 个警告和 0 个错误。实现这一目标的正确方法是什么？

注意

我已经尝试了很多，例如这个：

/* stylelint-disable */
@import '~bootstrap';
@import '~bootstrap-vue';
/* stylelint-enable */

有了这个，8000个警告消失了，但我收到了另一个警告：

(11596:1) Unexpected duplicate selector "body", first used at line 56 (no-duplicate-selectors)

我还尝试使用以下选项编辑.stylelintrc.json来实现我想要的：ignoreFiles、ignorePath、severity、defaultSeverity。我无法让它工作。

Answer 1

来自文档

可以使用 .stylelintignore 文件(或指向另一个忽略模式文件)来忽略特定文件。

在检查文件系统之前，这些文件将从文件 glob 中排除，因此这是忽略大量文件的有效方法。

因此，添加一个包含要忽略的路径的.stylelintignore文件，

node_modules/

Answer 2

我在结合使用postcss-easy-import和stylelint时遇到了同样的问题。 对我来说，问题是stylelint作为PostCSS的直接插件加载，而它应该作为postcss-easy-import的插件加载。

PostCSS Config 之前

module.exports = ( cfg ) => {
return {
plugins: [
require( 'postcss-dart-sass' )({
includePaths: [ ... ]
}),
require( 'postcss-easy-import' )({
prefix: '_',
extensions: ['.scss', '.css']
}),
require( 'stylelint' )({
cache: true,
cacheLocation: '/tmp/.stylelintcache',
ignorePath: '.stylelintignore'
})
]
};
};

之后的 PostCSS 配置

module.exports = ( cfg ) => {
return {
plugins: [
require( 'postcss-dart-sass' )({
includePaths: [ ... ]
}),
require( 'postcss-easy-import' )({
prefix: '_',
extensions: ['.scss', '.css'],
plugins: [
require( 'stylelint' )({
cache: true,
cacheLocation: '/tmp/.stylelintcache',
ignorePath: '.stylelintignore'
})
]
})
]
};
};

Answer 3

真正解决我问题的是将覆盖引导样式的样式添加到禁用的样式中。

/* stylelint-disable */
@import '~bootstrap';
@import '~bootstrap-vue';
body {
background: gray;
}
/* stylelint-enable */