vuecli3中对postcss-pxtorem插件的配置相关问题

postcss-pxtorem是一款将px转换成rem格式的方式,本质上是以html标签的fontsize值为基准,动态改变元素的各种计量单位

  1. 安装

npm install postcss-pxtorem --save-dev

  1. 导入
//main.js
import ‘postcss-pxtorem‘//导入rem转换工具
  1. 配置

网上看到在安装后vue项目根目录下会自动生成一个postcss.config.js的配置文件,但是笔者在安装导入postcss-pxtorem后并没有看到该文件,笔者猜测可能是由于vuecli3移除了config目录,仅支持vue.config.js来配置相关插件的缘故

如果没有看到postcss.config.js可以在vue.config.js中配置postcss-pxtorem

在项目根目录下新建vue.config.js

//vue.config.js
module.exports = {
 plugins:{
    ‘postcss-pxtorem‘: { //在这里配置postcss-pxtorem的相关配置
      rootValue: 75,// html根元素的fz大小
      propList: [‘*‘]//作用于哪些标签
    }
  }
}

如果根目录中有postcss.config.js该配置文件,则:

//postcss.config.js
module.exports = {
  plugins:{
    autoprefixer:{
    },
    ‘postcss-pxtorem‘ :{
      rootValue: 75,//页面html根节点设置的fz的大小
      propList:[‘*‘] //匹配到的标签
    }
  }
}

使用以上方法都可以完成postcss-pxtorem的配置

一个验证配置是否生效的demo:

//myhome.vue
<template>
  <div class="home">
myhome
  </div>
</template>
<style lang="less" scoped>
  .home{
    width: 150px;
    height: 150px;//如果浏览器上显示单位是rem,则说明配置成功
    border-bottom: 1PX solid red; //如果px单位是大写,说明按原样输出
  }
</style>

如果配置生效,.home的div的宽高会转换成rem单位,但borer-bottom属性则不会转换,比如:

vuecli3中对postcss-pxtorem插件的配置相关问题

这样 ,就完成了在vuecli3中对postcss-pxtorem插件的配置。

以上。

相关推荐