【问题标题】：Exclude imported vendor files from linting with stylelint使用 stylelint 从 linting 中排除导入的供应商文件
【发布时间】：2020-01-01 10:05:56
【问题描述】：

我想使用 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。我无法让它工作。

【问题讨论】：

如何在 webpack 中使用 stylelint？通过 stylelint-webpack-plugin？
@felixmosh 是的，确切地说，通过 stylelint-webpack-plugin。这对你有帮助吗？

标签： webpack stylelint

【解决方案1】：

来自docs

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

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

所以添加一个带有要忽略的路径的.stylelintignore 文件，

node_modules/

【讨论】：

我看不出与使用 cmets 禁用样式的不工作解决方案有任何区别：/* stylelint-disable */
.stylelintignore 对我不起作用stackoverflow.com/questions/69936080/…

【解决方案2】：

我在使用 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'
          })
        ]
      })
    ]
  };
};

【讨论】：

【解决方案3】：

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

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

【讨论】：