如何在vue-cli中使用postcss-px-to-viewport(px自动转为vw)

1.安装插件

npm i postcss-px-to-viewport
npm i autoprefixer@8.0.0
autoprefixer作用是在样式中添加浏览器厂商前缀,避免手动处理样式兼容问题,安装的时候需要注意版本问题

2.在配置文件中引入以及进行配置

//vue.config.js

const autoprefixer = require('autoprefixer') // 自动添加浏览器前缀
const pxtoviewport = require('postcss-px-to-viewport') // px自动转vw单位

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtoviewport({
                        // 视口宽度配置,如果设计稿宽为360px,则设置为360
                        viewportWidth: 360,
                    }),
                ],
            },
        },
    },
}

3.重启脚手架即可生效