vue 配置 postcss-px2rem

本文主要是介绍vue 配置 postcss-px2rem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

postcss-px2rem

• postcss-px2rem 就是为了让我们直接在将代码中 px 自动转化成对应的 rem 的一个插件 (rem 是 root em 的缩写，rem 不是相对于当前元素，而是相对于根元素，所以，不论什么位置，使用 rem 单位都是相对于根元素的 font-size)

• 安装以下插件

  npm install postcss-px2rem -D
  npm install px2rem-loader -D
  

• 在 vue.config.js 文件中配置

  module.exports = {
  ...,
  chainWebpack: (config) => {config.module.rule('css').test(/\.css$/).oneOf('vue').resourceQuery(/\?vue/).use('px2rem').loader('px2rem-loader').options({remUnit: 16 })},
  }
  

• 这样配置之后只是对 css 起作用，并不能对 sass、scss、less 等预处理语言进行处理，所以我们需要另外一个插件 postcs-plugin-px2rem

postcs-plugin-px2rem

• 安装

  npm install postcss-plugin-px2rem -D
  

• 在 vue.config.js 文件中配置

  module.exports = {
  ...,
  css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require('postcss-plugin-px2rem')({rootValue: 16, // 换算基数// unitPrecision: 5, //允许REM单位增长到的十进制数字。// propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。mediaQuery: false, // （布尔值）允许在媒体查询中转换px。minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0})]}}}},
  }
  

设置根元素 font-size

• 在 src/utils 文件夹中新建文件 rem.js 根据浏览器的宽度来设置根元素的 font-size

  import _ from 'lodash' // Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
  // rem等比适配配置文件
  // 基准大小
  const baseSize = 16
  // 设置 rem 函数
  export const setRem = () => {// 当前页面屏幕分辨率相对于 1440宽的缩放比例，可根据自己需要修改console.log(document.documentElement.clientWidth)const scale = document.documentElement.clientWidth / 1440// 设置页面根节点字体大小（“Math.min(scale, 3)” 指最高放大比例为3，可根据实际业务需求调整）document.getElementsByTagName('html')[0].style['font-size'] = `${baseSize * Math.min(scale, 1.5)}px`
  }// 创建一个 debounced（防抖动）函数
  const setDomFontSizeDebounce = _.debounce(setRem, 400)
  window.addEventListener('resize', setDomFontSizeDebounce)

• 在 main.js 文件中引入 setRem 方法并使用

  import { setRem } from '@/utils/rem'
  setRem()
  

@别名

• vue 项目中当组件多的时候，以../ 的形式引入文件就会特别麻烦，所以设置 alias 别名的方式

moudle.exports = {configureWebpack: {resolve: {alias: {'@': path.resolve('src') // 配置src为根目录}},}	
}

这篇关于vue 配置 postcss-px2rem的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---