1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 基于vue-cli3的vue项目 通过postcss-pxtorem 实现px自动转换成rem

基于vue-cli3的vue项目 通过postcss-pxtorem 实现px自动转换成rem

时间:2022-03-01 06:42:07

相关推荐

基于vue-cli3的vue项目 通过postcss-pxtorem 实现px自动转换成rem

使用postcss-pxtorem 项目中的px转换为rem,rem单位用于适配不同宽度的屏幕。

如何在vue-cli3.0中使用postcss-pxtorem 插件

1 安装依赖包

npm install lib-flexible --savenpm install postcss-pxtorem --save-dev

2, 引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import "lib-flexible/flexible.js";

3, 配置postcss-pxtorem

vue-cli3 项目postcss-pxtorem的配置放在vue.config.js中(新构建的项目可能会找不到,需要手动在项目根目录创建vue.config.js)。

具体配置方法如下:

module.exports = {css: {loaderOptions: {postcss: {plugins: [// 把px单位换算成rem单位require("postcss-pxtorem")({rootValue: 75, // 换算的基数 (为了便于开发,根据设计图来定这个值,如果设计图给的宽度是750,通常就会把remUnit设置为75,这样就可以按照UI图1:1进行开发)selectorBlackList: [".van"],// 要忽略的选择器并保留为px。propList: ["*"], //可以从px更改为rem的属性。minPixelValue: 2 // 设置要替换的最小像素值。})]}}}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。