vue+webpack项目中px2rem的例子
项目环境搭建此处省略,不再赘述,需要的请查阅相关资料。
本篇只介绍,如果在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;
}
重启项目编译运行以后 在浏览器查看发现已生效
img {
width: 2.666667rem;
height: 2.666667rem;
}
vue+webpack项目中px2rem的例子的更多相关文章
- Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理
刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...
- Vue+webpack项目中实现跨域的http请求
目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...
- vue+webpack项目中使用dev-server搭建虚拟服务器,请求json文件数据,实现前后台分离开发
在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请 ...
- 如何在vue && webpack 项目中的单文件组件中引入css
引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- vue+webpack项目实际工作中需要生成一个配置文件供生产环境使用
大家都知道webpack打包十分方便,但是在工作中,前端写好的项目需要后端进行部署,就需要有一个配置文件. 使用插件 : GenerateAssetPlugin , 使用方法 : 1 在项目中安装 ...
随机推荐
- 重新开始学习C++
从2002年,大二的那个夏天开始,就接触了C++这门语言,大学那会就是在老师不停教育下,背诵C++的各种特征,完全不知道C++干嘛用的,当然自然也是不知道汇编语言,C语言是干嘛用的,老师让学就学吧.那 ...
- renren-fast-vue-动态路由-添加路由-方式一(直接在原有结构上添加)
在原有文件夹夹下新建自己的组件 在 mock/modules/sys-menu.js 中引入 实现路由的添加
- html+css 常用布局
1.中间固定宽度,两侧自适应 1.1 flex布局 <!DOCTYPE html><html lang="en"> <head> <met ...
- Zend Studio出现 Some characters cannot be mapped using "GBK" character encoding 错误
解决办法: Window->Profermance->General->Content Types->Text看目录下面的每个文件,包括子目录里面 Default encodi ...
- springboot接口:CommandLineRunner
springBoot接口:CommandLineRunner 一.作用: 在使用SpringBoot构建项目时,我们通常有一些预先数据的加载.那么SpringBoot提供了一个简单的方式来实现–Com ...
- mail----java发送普通邮件
package com.mail; import java.io.UnsupportedEncodingException; import java.util.Date; import java.ut ...
- hive调用MapReduce之后遇到kill command之后卡住或者一直开在MapReduce之前
https://blog.csdn.net/weixin_42158422/article/details/88876943
- PHP面试 PHP基础知识 六(正则表达式)
正则表达式 正则表达式的作用 分割.查找.匹配.替换字符串 分隔符:正斜线(/).hash符号(#).以及取反符号(~) 通用原子:\d(代表十进制的0-9).\D (取反除了0-9).\w(数字 ...
- maven surefire入门
一.maven常用命令: mvn compile mvn install mvn test mvn clean mvn dependency:resolve -X #查看完整的debug信息!!! ...
- 拾遗:systemctl --user
参考:https://wiki.gentoo.org/wiki/Systemd systemd 支持普通用户定义的 unit[s] 开机启动 systemctl --user enable/disab ...