关于Vue3 amfe-flexible 适配rem 遇到的问题

362 阅读1分钟
cnpm install postcss-pxtorem@5.1.1 amfe-flexible -S

px 无法转换为 rem

module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭es语法检查
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
})

控制台报错

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

  • options has an unknown property 'plugins'. These properties are valid:

解决方法 在plugins外面加一层postcssOptions

 css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          // 在plugins外面加一层postcssOptions
          plugins: [
            require('postcss-pxtorem')({ rootValue: 16, propList: ['*'] }),
          ],
        },
      },
    },
  },