webpack配置px自动转为rem

Dev _

于 2021-08-28 12:32:42 发布

阅读量756

点赞数

wushen

本文链接：https://blog.youkuaiyun.com/qq_44317018/article/details/119966582

版权

本文详细介绍了如何使用Webpack配合postcss-pxtorem插件，将CSS中的px单位自动转换为rem。通过安装指定版本的postcss-pxtorem，修改Webpack配置，创建postcss.config.js文件并重启项目，实现前端适配不同屏幕尺寸的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装`amfe-flexible`（用于设置 rem 基准值）

yarn add amfe-flexible
or 
npm i -S amfe-flexible

使用`amfe-flexible`

// src/main.js 中引入 amfe-flexible
import 'amfe-flexible'

安装 postcss-pxtorem（postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem）

注意版本太高会报错，需要安装指定版本

npm install postcss-pxtorem@5.1.1 --save-dev
or
yarn add postcss-pxtorem@5.1.1

# 安装loader
npm install postcss-loader@6.1.1 --save-dev
or
yarn add postcss-loader@6.1.1

# 安装autoprefixer
npm install autoprefixer@8.0.0 --save-dev
or
yarn add autoprefixer@8.0.0

`index.html`中添加`meta`标签

// src/public/index.html viewport 标签替换为如下内容
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">