symfony - 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 .