vue+webpack项目中px2rem的例子
来源:互联网 发布:企业汉字做域名的品牌 编辑:程序博客网 时间:2024/05/18 17:40
项目环境搭建此处省略,不再赘述,需要的请查阅相关资料。
本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem
第一步安装 npm install postcss-px2rem postcss --save
第二步 在 webpack.base.conf.js中 引入
const webpack = require('webpack')
const px2rem = require('postcss-px2rem')
const postcss = require('postcss')
第三步 在module中添加如下代码:需要
//此插件是自动把px换算成rem
plugins: [
new webpack.LoaderOptionsPlugin({
// webpack 2.0之后, 此配置不能直接写在自定义配置项中, 必须写在此处
vue: {
postcss: [require('postcss-px2rem')({ remUnit: 75, propWhiteList: [] })]
},
})
]
第四步 在rules中加如下代码,css我是用到sass,less,所以需要引入对应的loader,不需要的可不写。
{
test: /\.(css|less|scss)(\?.*)?$/,
loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
}
第五步:测试 加入一下css
img{
width: 200px;
height: 200px;
}
重启项目编译运行以后 在浏览器查看发现已生效
- width: 2.666667rem;
- height: 2.666667rem;
完结
如有疑问,请留言!!!
- vue+webpack项目中px2rem的例子
- vue使用px2rem
- vue-cli使用px2rem
- 1.vue项目例子——webpack安装
- 构建基于webpack的vue.js项目
- 提高 webpack 构建 Vue 项目的速度
- webpack的简单配置vue项目
- vue+webpack项目实战
- Vue +webpack 项目
- webpack 构建Vue项目
- webpack + vue项目搭建
- vue + webpack 构建项目
- vue + webpack 构建项目
- 初识 webpack vue项目
- Vue + webpack 项目实践
- 用Vue-cli生成vue+webpack的项目模板
- webpack + vue-cli 搭建 vue 项目的流程
- 如何降低Vue.js项目中Webpack打包文件的大小?
- 生成带参数的二维码接口实例
- 开源之于VMware的重要性
- Spring :监听器ContextLoaderListener的作用
- RxJava 官方文档中文翻译
- Unity Socket TCP
- vue+webpack项目中px2rem的例子
- Activity是如何加载布局文件的?
- [LeetCode] 103. Binary Tree Zigzag Level Order Traversal
- Let's Encrypt实现
- Ubuntu系统关机时将网卡工作模式由千兆自动切换至百兆非自适应
- 清华梦的粉碎—写给清华大学的退学申请(转自王垠Blog)
- Sublime Text3配置Python,常用快捷键汇总
- 数据加密技术发展
- 实现Comparable接口报错:Comparison method violates its general contract!