vue-cli3 使用 postcss-pxtorem & postcss-px2rem

使用 postcss-pxtorem

1. 安装 postcss-pxtorem

    npm install postcss-pxtorem -S 


2. 在vue.config.js 中添加

module.exports = {

    lintOnSave: true,

    css: {

        loaderOptions: {

            postcss: {

                plugins: [

                    require('postcss-pxtorem')({

                        rootValue : 37.5, // 换算的基数

                        propList  : ['*'],

                    }),

                ]

            }

        }

    },

}



使用 postcss-px2rem

1. 安装 postcss-px2rem

    npm install postcss-px2rem -S 

2. 在vue.config.js 中添加

module.exports = {

    lintOnSave: true,

    css: {

        loaderOptions: {

            postcss: {

                plugins: [

                    require('postcss-px2rem')({remUnit: 30}), // 换算的基数

                ]

            }

        }

    },

}


然后重启项目就可以啦!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本号 vue-c...
    tengrl阅读 3,715评论 0 0
  • 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较...
    不忘初心_9a16阅读 3,263评论 0 17
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,243评论 0 21
  • 我是去年九月走上教师这个工作岗位的,一年来,有付出,有感动,有欢喜,有收获。 从小就知道做老师很辛苦,...
    于杰雄阅读 723评论 12 13