@vue/cl構建得項目下,postcss.config.js配置,將px轉化成rem


依賴包: 

postcss-pxtorem

配置:

在項目根目錄下創建 postcss.config.js

配置如下:

module.exports = () => ({
plugins: [
require('autoprefixer')(),
// require('postcss-px2rem')({ remUnit: 75 })
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
});

  • rootValue (Number)根元素字體大小。
  • unitPrecision (數字)允許REM單位增長的十進制數。
  • propList (數組)可以從px更改為rem的屬性。
    • 值必須完全匹配。
    • 使用通配符*啟用所有屬性。例:['*']
    • *在單詞的開頭或結尾使用['*position*']會匹配background-position-y
    • 用於!與屬性不匹配。例:['*', '!letter-spacing']
    • 將“not”前綴與其他前綴組合在一起。例:['*', '!font*']
  • selectorBlackList (數組)要忽略的選擇器並保留為px。
    • 如果value是string,則檢查selector是否包含字符串。
      • ['body'] 會匹配 .body-class
    • 如果value是regexp,它會檢查選擇器是否與正則表達式匹配。
      • [/^body$/]會匹配body但不會.body
  • replace (布爾值)替換包含rems的規則,而不是添加回退。
  • mediaQuery (布爾值)允許在媒體查詢中轉換px。
  • minPixelValue (數字)設置要替換的最小像素值。

需要注意的是:上述配置是腳手架自動生成的文件(並不是自己創建的),即在構建項目時,將babel的配置成單獨的文件才可以,否則只能用下面這種方式來配置

如果再構建項目的時候選擇將babel配置單獨的文件,那么項目會自動生成:.eslintrc.js  postcss.config.js  babel.config.js  .browserslistrc 這幾個文件是比選擇配置在package.json中的

多出來的

 




免責聲明!

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



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