使用postcss的stylelint插件无法读取.stylelintrc的配置项

Question

使用vscode和stylelint插件能正常检查css文件，但是使用webpack + postcss-loader + stylelint插件构建时总是提示css文件书写不合规范, postcss配置如下：

{
    loader: 'postcss-loader',
    options: {
        sourceMap: true,
        plugins: [
            require('postcss-import')({
                root: path.join(__dirname, './'),
                path: [path.join(__dirname, './src/common/css')]
            }),
            require('stylelint')({
                configFile: './.stylelintrc.json'
            }),
            require('postcss-cssnext')()
           
        ]
    }
}

构建时报错

src/components/footer/style.css
7:1     ⚠  Expected empty line before rule (rule-empty-line-before) [stylelint]
12:1    ⚠  Expected empty line before rule (rule-empty-line-before) [stylelint]
...

/* footer */
.footer-bottom {
    padding-top: 1px;
    background-color: #1f1f1f;
}

.footer .transverse-thread {
    width: 30px;
    text-align: left;
}

.footer-data-list {
    float: right;
    margin-top: 50px;
}

但是书写css并没有检测到此错误

Answer 1

将style-lint前置即可解决该问题

{
    loader: 'postcss-loader',
    options: {
        sourceMap: true,
        plugins: [
            require('stylelint')(),
            require('postcss-import')({
                root: path.join(__dirname, './'),
                path: [path.join(__dirname, './src/common/css')]
            }),
            require('postcss-cssnext')()
           
        ]
    }
}

具体原因我也不大清楚，官方也没见相关文档，但是这样做能解决该问题