vue项目使用 postcss-pxtorem 适配移动端px自动转rem

vue项目使用 postcss-pxtorem 适配移动端px自动转rem

1.vue2 搭配 postcss px转vw 继续看此文章
2.vue2 搭配 postcss px转vw
3.vue3 搭配 postcss

.

【1】安装

安装：postcss-pxtorem

//1.npm方式：
npm install postcss-pxtorem --save-dev

//2.yarn安装：
yarn add -D postcss-pxtorem

安装：postcss-loader

//1.npm方式：
npm install postcss-loader postcss-pxtorem --save-dev

//2.yarn安装：
yarn add -D postcss-loader postcss-pxtorem

.

【2】配置

vue-cli3搭建的结构：

// vue.config.js 文件

// const autoprefixer = require('autoprefixer') //自动补全兼容css前缀-按需自己引用
const pxtorem = require('postcss-pxtorem')

module.exports = {
  //...
  devServer: {
    //...
  },
  css: {
    sourceMap: true,
    loaderOptions: {
      postcss: {
        plugins: [
          // autoprefixer(), //自动补全兼容css前缀-按需自己引用
          pxtorem({
            rootValue: 75,
            propList: ['*']
          })
        ]
      }
    }
  },
}

【3】重启项目

vue.config.js 修改这个文件需要重启项目

【4】温馨提示：

1.vue2 搭配 postcss px转vw 查阅另一个文章：[点击跳转查看详情]
postcss 在元素标签上面的style链式样式不能生效 ，只能转化样式文件或者style标签

<div style="width:200px;"></div> 不能转

---

有问题留言交流~~