Vue插件与ui组件样式冲突

Vue插件与ui组件样式冲突

vuecli3.x搭建项目 安装了postcss-px2rem但是影响了ui组件的样式

1.因为postcss-px2rem不能忽略指定文件 需要安装postcss-px2rem-exclude

（安装前需要先卸载postcss-px2rem，未安装postcss-px2rem直接安装postcss-px2rem-exclude ）

（1）安装 （如果安装了 postcss-px2rem ，记得卸载一下 npm uninstall postcss-px2rem）

//如果安装了 postcss-px2rem ，卸载 npm uninstall postcss-px2rem
// 安装插件

npm install amfe-flexible --save
npm i postcss-px2rem-exclude --save

（2）main.js引入

// main.js引入
import 'amfe-flexible'

2. 在根目录下创建 postcss.config.js内修改

方法一：exclude 里是要忽略的文件

//在根目录下创建 postcss.config.js内修改

module.exports = {
  plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
              "remUnit": 75,  //设计图为750，如果设计与为375，则改为37.5
              "exclude": /node_moudules/   //忽略node_modules目录下的文件
        }
  }
}

方法二：我自己用的vantUI，试了一下，也可以这样写

//在根目录下创建 postcss.config.js内修改

module.exports = {
  plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
              "remUnit": 75,  //设计图为750，如果设计与为375，则改为37.5
              "exclude": "vant" //这里以vantui 为例
        }
  }
}