webpack - 我无法使用 POSTCSS 在 VueCLI 中设置自动前缀

Question

我想用 postcss-loader 设置 autoprefixer 插件。因为显然 15 版中的 vue-loader 默认不会激活 autoprefixer。我尝试了几种方法来做到这一点，将 postcss 配置放在单独的文件中，在 package.json 和 vue.config.js 文件中。

我设法得到的唯一结果是编译错误或没有错误但没有自动添加前缀。

如果你有我的解决方案，我很感兴趣。

包.json：

{
  "name": "lion_coach_espace_membre",
  "private": true,
  "scripts": {
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:cypress": "npx cypress open",
    "lint": "vue-cli-service lint",
    "format": "eslint -c .eslintrc.js --fix src/",
    "start:dev": "vue-cli-service serve"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.14.0",
    "date-fns": "^2.22.1",
    "js-cookie": "^2.2.1",
    "jwt-decode": "^3.1.2",
    "querystring-ts": "^1.0.1",
    "regenerator-runtime": "^0.13.7",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.14",
    "vue-meta": "^2.4.0",
    "vue-router": "^3.5.1",
    "vuetify": "^2.5.3",
    "vuex": "^3.6.2",
    "vuex-extensions": "^1.1.5"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@types/js-cookie": "^2.2.6",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-plugin-pwa": "^4.5.13",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-plugin-typescript": "^4.5.13",
    "@vue/cli-plugin-unit-jest": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.2.0",
    "autoprefixer": "^10.2.6",
    "cypress": "^7.5.0",
    "eslint": "^7.28.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-vue": "^6.2.2",
    "postcss": "^8.3.1",
    "postcss-loader": "^5.3.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "2.2.1",
    "sass": "^1.34.1",
    "sass-loader": "^10.0.0",
    "typescript": "^3.9.9",
    "vue-cli-plugin-vuetify": "^2.4.1",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "postcss": {
    "plugins": [
      "autoprefixer"
    ]
  }
}

vue.config.js ：

module.exports = {
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .use("postcss-loader")
      .loader("postcss-loader")
      .options({
        postcssOptions: {
          plugins: [
            [
              "autoprefixer",
              {

              },
            ],
          ],
        },
      });
  },
  // css: {
  //   loaderOptions: {
  //     css: {
  //       importLoaders: 1,
  //     },
  //     postcss: {
  //       test: /\.vue$/i,
  //       loader: "postcss-loader",
  //       options: {
  //         postcssOptions: {
  //           plugins: [
  //             [
  //               "postcss-preset-env",
  //             ],
  //           ],
  //         },
  //       },
  //     },
  //   },
  // },
  pages: {
    index: {
      entry: "src/main",
      // the source template
      template: "public/index.html",
      // output as dist/index.html
      filename: "index.html",
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Lion Coach - Espace Membre",
    },
  },
  pwa: {
    name: "Lion Coach - Espace Membre",
    themeColor: "#2F2362",
    assetsVersion: "2",

    workboxOptions: {
      skipWaiting: true,
    },

    manifestOptions: {
      short_name: "Lion Coach",
      display: "standalone",
      background_color: "#FFFFFF",
      start_url: ".",
      icons: [
        {
          src: "./img/icons/android-chrome-192x192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "./img/icons/android-chrome-512x512.png",
          sizes: "512x512",
          type: "image/png",
        },
        {
          src: "./img/icons/android-chrome-maskable-192x192.png",
          sizes: "192x192",
          type: "image/png",
          purpose: "maskable",
        },
        {
          src: "./img/icons/android-chrome-maskable-512x512.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "maskable",
        },
        {
          src: "./img/icons/apple-touch-icon-60x60.png",
          sizes: "60x60",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-76x76.png",
          sizes: "76x76",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-120x120.png",
          sizes: "120x120",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-152x152.png",
          sizes: "152x152",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-180x180.png",
          sizes: "180x180",
          type: "image/png",
        },
      ],
    },
  },
};