Issues related to the configuration of the postcss-pxtorem plugin in vuecli3

postcss-pxtorem is a way to convert px to rem format, which is essentially based on the fontsize value of the html tag, dynamically changing the various measurement units of the element

1. installation

npm install postcss-pxtorem --save-dev

2. Import

//main.js
import 'postcss-pxtorem'//导入rem转换工具

3. Configuration

I saw on the Internet that a postcss.config.js configuration file is automatically generated in the root directory of the vue project after installation, but I did not see the file after installing and importing postcss-pxtorem . The author suspects that vuecli3 has removed the config Directory, only supports vue.config.js to configure related plugins

If you don't see postcss.config.js you can configure postcss-pxtorem in vue.config.js

Create a new vue.config.js in the project root directory

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

If there is a configuration file postcss.config.js in the root directory, then:

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

Use the above methods to complete the configuration of postcss-pxtorem

A demo to verify that the configuration is in effect:

//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>

If the configuration takes effect, the width and height of the .home div will be converted to rem units, but the borer-bottom attribute will not be converted, such as:

In this way, the configuration of the postcss-pxtorem plugin in vuecli3 is completed.

the above.