Stylelint 输出不显示出现警告的文件的名称

Question

当运行 stylelint 时，警告的输出不显示发生错误的文件的名称（有错误它可以正常工作）。我的文件如下所示：

app.scss

@import './_file-with-error';

_file-with-error.scss

html body {
  color: red;
}

body { // provocate an error ????
  color: red;
}

我使用 Webpack Encore 和 stylelint 作为 PostCSS 插件，当我构建时我得到：

michael@machine:~$ yarn encore dev
yarn run v1.21.1
$ /var/www/html/mop/mop/node_modules/.bin/encore dev
Running webpack ...

 WARNING  Compiled with 1 warnings                                                                                                                                     11:47:14 PM

 warning  in ./assets/scss/app.scss

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(5:1) Expected selector "body" to come before selector "html body" (no-descending-specificity)

Entrypoint app [big] = runtime.js vendors~app.js app.css app.js
Entrypoint home = runtime.js home.js
Entrypoint _tmp_copy = runtime.js
Done in 3.06s.

所以一切都很好，只是我看不到警告来自哪里，我需要 filename 和 line。我该如何配置？

设置

webpack.config.js

Encore.enablePostCssLoader();

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    stylelint: {},
  },
};

.stylelintrc.json

{
  "extends": "stylelint-config-standard",
  "rules": {
    "no-duplicate-selectors": null
  }
}

Answer 1

你需要add a reporter to your PostCSS pipeline:

stylelint 插件通过 PostCSS 注册警告。因此，您需要将它与打印警告的 PostCSS 运行程序或另一个用于格式化和打印警告的 PostCSS 插件一起使用（例如postcss-reporter）。

例如：

module.exports = {
  plugins: {
    autoprefixer: {},
    stylelint: {},
    'postcss-reporter': { clearReportedMessages: true }
  },
}

或者，您可以使用official webpack plugin for stylelint。