Vue插件与ui组件样式冲突

  时间:2020-07-28 12:51:50  阅读量:1.8k+  评论数:0  作者:程小侉

这篇文章主要介绍了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/i   //忽略node_modules目录下的文件
        }
  }
}

我自己用的vantUI,试了一下,也可以这样写

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

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

关键词:node.js,vue.js,javascript,插件,组件,样式,冲突