Webpack postcss-loader无法用于.vue文件

Question

我有一个Vue Webpack项目，使用较少的CSS预处理程序。大多数情况下，一切都工作正常，但是postcss-loader无法自动对来自.vue文件的css进行前缀。它仅处理通过普通.js文件导入的css。

在我的Vue Webpack项目中，我有：

rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            hotReload: true
        }
    }, {
        test: /\.less$/,
        use: [
            {loader: 'style-loader'},
            {loader: 'css-loader'},
            {loader: 'postcss-loader'},
            {loader: 'less-loader'}
        ]
    }, {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-env"]
            }
        }
    }]

我的postcss.config.js看起来像：

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer')
    ]
}

我的.vue文件如下：

<template>
    <div class="my-header"></div>
</template>

<style lang="less" scoped>
@import (reference) '../styles/core-colors.less';
.my-header {
    display: grid;
    grid-template-columns: 1fr auto;
    background-color: @color--atlantis;
}
</style>

我完全不了解所有这些装载机如何协同工作。显然，vue-loader知道它应该使用.less文件的规则来转换.vue文件中的样式，这可能是因为lang ='less'，但我想它也将运行postcss。