vue-cli 3.0中配置postcss支持rem、vw布局

vue.config.js 相关代码如下


module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 16,
                        selectorBlackList: ['el'], // 忽略转换正则匹配项
                        propList: ['*'],
                    }),
                    require('postcss-px-to-viewport')({
                        viewportWidth: 750, //根据视觉稿的宽度进行设置
                        unitPrecision: 5,
                        viewportUnit: 'vw',
                        selectorBlackList: ['el'], //忽略转换的css选择器
                        minPixelValue: 1,
                        mediaQuery: false
                    }),
                ]
            }
        }
    },
}

推荐阅读更多精彩内容