vue-app項目，將px自動轉化爲rem

1. 安裝lib-flexible：

npm i -S amfe-flexible（注意：lib-flexible嘗試後，換算結果不正確，切記不要用）

2.安裝px2rem：

npm install px2rem-loader

3.在項目入口文件main.js中引入lib-flexible


import 'amfe-flexible';



4. 在項目public目錄的index.html頭部加入手機端適配的meta的代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">

5.這裏是重要的一步~~

在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，如：

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75

//注意： remUnit在這裏要根據lib-flexible的規則來配製，若是您的設計稿是750px的，用75就剛恰好。

} }

同時，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

6.重啓，一切ok~

當配置完以後，只須要重啓下服務，就自動轉化爲rem了

npm run dev

  

7.舒適提示
  當你遇到1px的邊框時，一般容易發現頁面缺失部分邊框，這時你能夠使用/*no*/語法來屏蔽該屬性轉換，例如：
border: 1px solid red; /*no*/
因爲字體的特殊性，咱們在編譯font-size屬性時，一般不使用rem單位，這時候你能夠這樣使用：

font-size: 24px; /*px*/ 


--------------------- 
做者：婁笙悅 
來源：CSDN 
原文：https://blog.csdn.net/weixin_41424247/article/details/80867351 
版權聲明：本文爲博主原創文章，轉載請附上博文連接！