Vue px转化为rem

发表于 | 更新于:

index.html

1
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

vue3

Viewport 布局

安装插件

1
npm i amfe-flexible postcss-pxtorem;

配置

1
2
3
4
5
6
7
8
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
}

Rem 布局适配

安装插件

1
npm i amfe-flexible postcss-pxtorem;

配置

postcss.config.js

1
2
3
4
5
6
7
8
9
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue: 75,
      exclude: /node_modules/i
    },
  },
};

vite

vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import postcsspxtoviewport from "postcss-px-to-viewport"

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          viewportWidth: 750,
          exclude: /node_modules/i,
        })
      ]
    }
  }
})

Vue2

vue-cli4

安装插件

1
npm i amfe-flexible postcss-pxtorem -S;

配置插件

mainjs

1
import 'lib-flexible'

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-pxtorem')({
                rootValue: 37.5
              })
            ]
          }
        }
    },
}

或者 package.json

1
2
3
4
5
6
7
8
9
10
{
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75
      }
    }
  }
}

或者 postcss.config.js

1
2
3
4
5
6
7
8
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

vue-cli3

安装插件

1
npm i lib-flexible px2rem-loader -S;

配置插件

main.js

1
import 'lib-flexible'
  1. 打开build/utils.js文件，找到exports.cssLoaders方法，在里面添加如下代码
1
2
3
4
5
6
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
  }
  1. 打开build/utils.js文件，找到generateLoaders方法
1
2
3
4
5
6
7
8
9
10
11
function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, px2remLoader];                //  1.添加px2remLoader 插件
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }   
 }

  1. build/utils.js文件 添加 generateSassResourceLoader方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function generateSassResourceLoader () {                
       const loaders = [
          cssLoader,
          px2remLoader,
          'less-loader'
       ]
       if (options.extract) {
          return ExtractTextPlugin.extract({
             use: loaders,
             fallback: 'vue-style-loader'
          })
       } else {
           return ['vue-style-loader'].concat(loaders)
       }
    }

  2. 修改 build/utils.js文件 return

    1
    2
    3
    4
    5
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateSassResourceLoader()                //  修改less的值
    }

  3. 修改/node_modules/px2rem-loader/lib/px2rem-loader.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var loaderUtils = require('loader-utils')
    var Px2rem = require('px2rem')

    module.exports = function (source) {
      var options = loaderUtils.getOptions(this)
      if (/node_modules/.test(this.resourcePath)) return source
      var px2remIns = new Px2rem(options)
      return px2remIns.generateRem(source)
    }

重启，一切ok~

1
npm run dev

插件文档地址

postcss-px-to-viewport

postcss-pxtorem

lib-flexible

amfe-flexible