使用 stylelint 从 linting 中排除导入的供应商文件

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

来自docs

You can use a .stylelintignore file (or point to another ignore patterns file) to ignore specific files.

These files will be excluded from the files glob before the file system is check at all, so it is an efficient method for ignoring lots of files.

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

node_modules/

Answer 2

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

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

Answer 3

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

的插件加载

之前的 PostCSS 配置

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'
          })
        ]
      })
    ]
  };
};

使用 stylelint 从 linting 中排除导入的供应商文件

Exclude imported vendor files from linting with stylelint

webpack

stylelint

备注

之前的 PostCSS 配置

PostCSS 配置后