原文：https://blog.csdn.net/dq674362263/article/details/78740820

本文重点：

项目环境搭建此处省略，不再赘述，需要的请查阅相关资料。

本篇只介绍，如果在vue+webpack的项目中配置，把px自动转为rem

第一步安装   

[Bash shell] 纯文本查看 复制代码

npm install   postcss-px2rem postcss --save   

第二步  
在 webpack.dev.conf.js中 引入
在 webpack.prod.conf.js中 引入

[JavaScript] 纯文本查看 复制代码

const webpack = require('webpack')

const px2rem = require('postcss-px2rem')
const postcss = require('postcss')

第三步 在module中添加如下代码：需要

  //此插件是自动把px换算成rem

[CSS] 纯文本查看 复制代码

  plugins: [
    new webpack.LoaderOptionsPlugin({
        // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
        vue: {
            postcss: [require('postcss-px2rem')({ remUnit: 75, propWhiteList: [] })]
        },
    })
  ]

第五步：测试  加入一下css

[CSS] 纯文本查看 复制代码

img{
  width: 200px;
  height: 200px;
}

重启项目编译运行以后  在浏览器查看发现已生效

[CSS] 纯文本查看 复制代码

img {
    width: 2.666667rem;
    height: 2.666667rem;
}

但是会有一个问题在css里面引用图片的时候会默认在路径加上'../../'，会出现问题，所以要使用‘~’

[CSS] 纯文本查看 复制代码

background-image: url('~../assets/logo.png');

原文：https://blog.csdn.net/dq674362263/article/details/78740820

本文重点：

项目环境搭建此处省略，不再赘述，需要的请查阅相关资料。

本篇只介绍，如果在vue+webpack的项目中配置，把px自动转为rem

第一步安装   

[Bash shell] 纯文本查看 复制代码

npm install   postcss-px2rem postcss --save   

第二步  
在 webpack.dev.conf.js中 引入
在 webpack.prod.conf.js中 引入

[JavaScript] 纯文本查看 复制代码

const webpack = require('webpack')

const px2rem = require('postcss-px2rem')
const postcss = require('postcss')

第三步 在module中添加如下代码：需要

  //此插件是自动把px换算成rem

[CSS] 纯文本查看 复制代码

  plugins: [
    new webpack.LoaderOptionsPlugin({
        // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
        vue: {
            postcss: [require('postcss-px2rem')({ remUnit: 75, propWhiteList: [] })]
        },
    })
  ]

第五步：测试  加入一下css

[CSS] 纯文本查看 复制代码

img{
  width: 200px;
  height: 200px;
}

重启项目编译运行以后  在浏览器查看发现已生效

[CSS] 纯文本查看 复制代码

img {
    width: 2.666667rem;
    height: 2.666667rem;
}

但是会有一个问题在css里面引用图片的时候会默认在路径加上'../../'，会出现问题，所以要使用‘~’

[CSS] 纯文本查看 复制代码

background-image: url('~../assets/logo.png');