项目环境搭建此处省略,不再赘述,需要的请查阅相关资料。

本篇只介绍,如果在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的例子的更多相关文章

  1. Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理

    刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...

  2. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  3. vue+webpack项目中使用dev-server搭建虚拟服务器,请求json文件数据,实现前后台分离开发

    在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请 ...

  4. 如何在vue && webpack 项目中的单文件组件中引入css

    引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...

  5. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  6. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  7. vue+webpack项目实际工作中需要生成一个配置文件供生产环境使用

    大家都知道webpack打包十分方便,但是在工作中,前端写好的项目需要后端进行部署,就需要有一个配置文件. 使用插件 :  GenerateAssetPlugin , 使用方法 : 1  在项目中安装 ...

  8. Vue + webpack 项目实践

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  9. nodejs, vue, webpack 项目实践

    vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...

随机推荐

  1. 数据库:django ORM如何处理N+1查询

    数据库N+1查询是个常见的问题,简单描述场景如下 基本场景 class Category(models.Model): name = models.CharField(max_length=30) c ...

  2. 移动App该如何保存用户密码(转)

    原文地址:http://blog.csdn.net/hengyunabc/article/details/34623957 移动App该如何保存用户密码? 这个实际上和桌面程序是一样的. 先看下一些软 ...

  3. ICON文件保存

    这两天想做一下windows系统下图标的修改,让程序有更新的时候能够更新图标的外观,达到提醒的作用,360,QQ经常采用这种方式进行更新的提示,也有采用弹框的方式来提示,用新版QVOD的同事可能见到过 ...

  4. codeforces 397B

    #include <cstdio> #include <cstdlib> #include <cmath> #include <map> #includ ...

  5. JVM学习03_new对象的内存图讲解,以及引出static方法(转)

    目录 -=-讲解对象创建过程中,-=-堆内存和栈内存的情况 -=-构造函数对类对象的成员变量的初始化过程 -=-构造函数出栈 -=-类的方法在不访问类对象的成员变量时造成的内存资源浪费怎么解决? -= ...

  6. 201521123076 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  7. windows server 2008 R2 NPS(网络连接策略服务)设置radius,实现telent登陆交换机路由器权限分配

    windows2008NPS(网络连接策略)设置radius 实现telent登陆交换机路由器权限分配 转载请说明出处 一,安装 首先在08中添加服务器角色网络策略和访问服务(Network Poli ...

  8. 对HTML5标签的认识(三)

    这篇随笔继续来认识HTML标签.这次随笔主要是对<table>标签的认识和最近我学习到的一些标签来和大家分享. 一.<table>标签 <table>标签的作用主要 ...

  9. easyui获取选中行上一行的数据

    text: 'XX',            iconCls: 'icon-ok',            handler: function () {                var rowI ...

  10. CentOS/redhat使用光盘镜像源

    1,首先进行光盘的挂载,注意光盘挂载时不会自动建立目录的,    所以需要自己建立目录.    mkdir /mnt/cdrom    mount /dev/cdrom /mnt/cdrom  #de ...