vuecli3.x 中使用px2rem 忽略指定文件 不影响ui组件样式的解决方案

最近在用vuecli3.x搭建项目    安装了postcss-px2rem但是影响了ui组件的样式,网上的方法都试过,总结下

1. postcss-px2rem不能忽略指定文件   需要安装postcss-px2rem-exclude(安装前需要先卸载postcss-px2rem)

    npm uninstall postcss-px2rem

    npm i postcss-px2rem-exclude -D
2.  在项目搭建的时候要选择配置文件的位置了。

     对于 Babel 、 PostCSS 等,都可以有自己的配置文件: .babelrc 、 .postcssrc 等等

     或者也可以把配置信息放在 package.json 里面

3. 要是选择独立配置文件的 直接在根目录下  postcss.config.js内修改

exclude  就是要忽略的文件    

4. 最坑的就是你选的配置信息都放在 package.json 里面

我参照网上的方法 把配置放在package.json  根本无效

之后我查看了postcss-px2rem-exclude 的源码,发现在package.json中加入的配置传过去的是  "/node_moudules/i"是字符串,并不是正则表达式,所以根本无效,我自己试了2中方法均有效

第一种: 就是删除package.json 中关于postcss的配置

                然后在根目录下新建postcss.config.js,把package.json中的postcss配置放到postcss.config.js

                同3  

                module.exports = {

                  plugins: {

                        autoprefixer: {},

                        "postcss-px2rem-exclude": {

                              "remUnit": 32,

                              "exclude": /node_modules/i

                        }

                  }

                }

第二种  就是修改postcss-px2rem-exclude 源码

/node_modules/postcss-px2rem-exclude/lib/index.js 文件 增加如下内容,即可


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较...
    不忘初心_9a16阅读 3,259评论 0 17
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • 写在前面的话:以下内容会结合实例进行分析webpack安装与使用过程中遇到的问题及解决方法 1、webpack安装...
    小龙虾Julian阅读 1,795评论 0 1
  • 孙小猛~河北惠友集团 【日精进打卡第129天】 【知~学习】 《六项精进》3遍 共387遍 《大学》3遍 共387...
    亮亮sxm阅读 93评论 0 0
  • 叶落无声 人无踪影 你说要是一个人想躲你 你是否寻得到 寻不到你的日子 我就等,等,等 等到心中的火淡 等到心中的...
    nicheng随阅读 192评论 0 0