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

版权声明：本文为博主原创文章，转载请附上博文链接！