在同一个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   ------------------------------------------------------------------

Logo

前往低代码交流专区

更多推荐