通过chainWebpack在vue配置文件中使用webpack postcss配置

Question

如何转换以下配置代码，使其与chainWebpack文件中的vue.config.js一起使用？
（这是从vue-loader documentation获得的推荐配置）

// webpack.config.js -> module.rules
{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 1 }
    },
    'postcss-loader'
  ]
}

我想出了以下代码-但这似乎首先完全执行了“常规”样式加载器：

chainWebpack: config => {
  config.module
    .rule('postcss')
    .test(/\.css$/)

    .use('vue-style-loader')
    .tap(options =>
      _merge(options, {
        importLoaders: 1,
      }),
    )
    .loader('postcss-loader');

好像css文件在postcss读取之前被编译为javascript文件，这会导致多个错误，例如：

 error  in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css

Syntax Error: SyntaxError

(1:4) Unknown word

> 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
    |    ^
  2 |
  3 | // load the styles