postcss-px2rem-exclude打包rem影响其它项目的解决方案
在同一个VUE实例下的多个项目,比如一个是H5,另一个为Admin管理系统,那么在H5中使用了"postcss-px2rem-exclude",这样会影响到Admin页面里的样式变化,这个时候我们就需要把需要的文件在编译时打包成rem,而不需要的文件则过滤掉。emmmmmm.......找了很多方法都没能做到,最后请教了一位大神,只需要在 .postcssrc.js 文件中配置一下就好了,下面..
在同一个VUE实例下的多个项目,比如一个是H5,另一个为Admin管理系统,那么在H5中使用了"postcss-px2rem-exclude",这样会影响到Admin页面里的样式变化,这个时候我们就需要把需要的文件在编译时打包成rem,而不需要的文件则过滤掉。
emmmmmm.......找了很多方法都没能做到,最后请教了一位大神,只需要在 .postcssrc.js 文件中配置一下就好了,下面上码:
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-px2rem-exclude":{
remUnit:37.5,
exclude:/admin/
}
}
};
这样配置以后需要把以前在 build 文件夹下的 utils.js 文件中写入的配置信息删除。
未完....
以为解决这个问题了,欣喜若狂,emmmmm......
项目起来以后发现,Element的一些样式还是被转成了rem。
日了泰迪的感觉.....
继续求助大佬,还是自己搞.....(内心疯狂挣扎),最后还是先自己试试吧!
既然 /admin/ 能够把 admin 过滤掉,那么是不是也可以直接把 Element 同样过滤掉,但是 / / 是什么意思?想了想,应该是正则吧!先不管了,既然有了思路那么就先这么搞起来!在实践中求成真理。
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-px2rem-exclude":{
remUnit:37.5,
exclude:/admin|element-ui/ //此目录下的文件不会被转换为rem
}
}
};
怀揣着激动的心情 dev了一下,项目启动,进入admin 界面,登录,查看元素,完美,这次并没有被转换成 rem。
项目跑了一段时间发现 一直没有被转换,虽然不知道是不是最优 的解决方案,但是我只会这个了.... 哈哈哈!若我小小的骄傲一下!
喜欢博主的可以点赞关注一下
--------------------------------------------------------------- END ------------------------------------------------------------------
更多推荐
所有评论(0)