vue-cli3.0 使用postcss-plugin-px2rem(推荐)自动转换px为rem 的配置方法
第一步安装npm install amfe-flexible -Snpm install postcss-px2rem -S第二步引入 lib-flexible在入口main.js中 引入 lib-flexibleimport "amfe-flexible/index.js";注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录...
·
第一步安装
npm install amfe-flexible -S
npm install postcss-px2rem -S
第二步引入 lib-flexible
在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";
注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
配置postcss-px2rem
vuecli3 配置
px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js)
具体配置内容如下:
postcss-pxtorem 在postcss.config.js中配置
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 37.5
})
]
}
}
}
}
使用方法
按照上面的步骤写完后,使用时设计图750px的,那设计图要是300px的宽度,那代码里面写成300px。这样就可以了
更多推荐
已为社区贡献6条内容
所有评论(0)