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 文件 增加如下內容,即可

 

 
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM