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 
版权声明：本文为博主原创文章，转载请附上博文链接！

 

转载于:https://www.cnblogs.com/duanzhenzhen/p/10555640.html