vue-cli3.0用lib-flexible、postcss-px2rem-exclude实现移动端适配,解决第三方ui库样式变小问题,如:vant

第一部分:项目中引入lib-flexible

一、项目中安装lib-flexible

npm install lib-flexible 

二、在项目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

第二部分:使用postcss-px2rem-exclude自动将css中的px转换成rem

一、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

二、配置 postcss-px2rem-exclude,在postcss.config.js文件中

module.exports = {
    plugins: {
        autoprefixer: {
        },
        "postcss-px2rem-exclude": {
            remUnit: 75,
            exclude: /node_modules|folder_name/i   // 忽略node_modules目录下的文件
        }
    },
}

重新启动,就OK了。

吐槽:在网上找了很多都试过了就是不好使,之后看到其中一篇中,将配置 postcss-px2rem-exclude配置中 exclude路径中的引号去掉就好使了

你可能感兴趣的:(vue,vue-cli3.0,lib-flexible,移动端适配)