vue項(xiàng)目使用postcss-pxtorem(應(yīng)用于vue-cli 2和3)

vue-cli 2:

  1. 安裝插件yarn或者npm
yarn add postcss-pxtorem
  1. 編輯項(xiàng)目根目錄下.postcss.js文件(沒有則新建一個(gè))
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此處為添加部分
      rootValue: 32, // 對應(yīng)16px 適配移動(dòng)端750px寬度
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

vue-cli 3:
項(xiàng)目下新建vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px單位換算成rem單位
            rootValue: 32, // 換算的基數(shù)(設(shè)計(jì)圖750的根字體為32)
            selectorBlackList: ['weui', 'mu'], // 忽略轉(zhuǎn)換正則匹配項(xiàng)
            propList: ['*']
          })
        ]
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產(chǎn)環(huán)境修改配置...
    } else {
      // 為開發(fā)環(huán)境修改配置...
    }
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計(jì)架構(gòu)和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 3,153評(píng)論 1 4
  • 1. 復(fù)習(xí)周一翻譯課 2. 復(fù)習(xí)人物閱讀課 3. 翻譯新課 4. 總結(jié),筆記昨天的反向進(jìn)英的寫人文章 5. 背政經(jīng)...
    齊大棗閱讀 198評(píng)論 0 0
  • 月影里的風(fēng)平浪靜閱讀 454評(píng)論 2 7
  • 基本管理 安裝lxc:aptitude install lxc 檢查內(nèi)核是否支持lxc:lxc-checkconf...
    發(fā)條蛙閱讀 603評(píng)論 0 0

友情鏈接更多精彩內(nèi)容