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.

所以一切都很好，只是我没有看到警告的来源，我需要 文件名 和行。我该如何配置？

设置

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:

The stylelint plugin registers warnings via PostCSS. Therefore, you'll want to use it with a PostCSS runner that prints warnings or another PostCSS plugin whose purpose is to format and print warnings (e.g. postcss-reporter).

例如：

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

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

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

Stylelint output does not show the name of the file where warnings occur

symfony

stylelint

webpack-encore

设置