经过一番折腾重要搞定了。

首先需要安装postcss-plugin-px2rem。

npm install --save-dev postcss-plugin-px2rem

我的webpack工程中没有webpack.config.js,倒是有webpack.base.config.js文件。从这个文件中得知 vue结尾文件引用vue-loader.config.js中的配置,如下便这个文件。

下面的第5、19-21行为自己添加。rootValue中的75为 1rem所对应的px;默认为100,我这里改为75。
复制代码 1 'use strict'
2 const utils = require('./utils')
3 const config = require('../config')
4 const isProduction = process.env.NODE_ENV === 'production'
5 var px2rem = require('postcss-plugin-px2rem');
6 module.exports = {
7 loaders: utils.cssLoaders({
8 sourceMap: isProduction
9 ? config.build.productionSourceMap
10 : config.dev.cssSourceMap,
11 extract: isProduction
12 }),
13 transformToRequire: {
14 video: 'src',
15 source: 'src',
16 img: 'src',
17 image: 'xlink:href'
18 },
19 postcss: function () {
20 return [px2rem({rootValue:75})];
21 }
22 }
转自:https://www.cnblogs.com/wsy6566/p/7724582.html

在webpack中使用postcss-px2rem的的更多相关文章

  1. 在webpack中使用postcss之插件包precss

    precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package ...

  2. 在webpack中使用postcss之插件cssnext

    学习了precss插件包在webpack中的用法后,下面介绍postcss的另一个重要插件cssnext,步骤没有precss用法详细,主要介绍css4的语法,cssnext目前支持了部分新特性,你可 ...

  3. 深入浅出的webpack构建工具---PostCss(五)

    一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本, ...

  4. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  5. webpack 中使用 autoprefixer

    webpack中autoprefixer是配合postcss-loader使用的,首先安装相应资源: npm i -D style-loader css-loader postcss-loader a ...

  6. Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  7. webpack中利用require.ensure()实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  8. webpack中实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  9. [转] webpack中配置Babel

    一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...

  10. [转]webpack中require和import的区别

    webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...

随机推荐

  1. QMessageBox的用法

    QMessageBox的用法   先来看一下最熟悉的QMessageBox::information.我们在以前的代码中这样使用过:   QMessageBox::information(NULL,  ...

  2. QT学习之windows下安装配置PyQt5

    windows下安装配置PyQt5 目录 为什么要学习QT 命令行安装PyQt5以及PyQt5-tools 配置QtDesigner.PyUIC及PyRcc 为什么要学习QT python下与界面开发 ...

  3. Linux开源监控平台 -- Zabbix 小白安装以及使用

    安装准备: 1.安装前需要先关闭selinux和firewall. 关闭Linux: [root@zabbix ~]# vi /etc/selinux/config 将SELINUX=enforcin ...

  4. JS中获取文件点之后的后缀字符

    var FileName = $("#file").val(); var index1=FileName.lastIndexOf("."); var index ...

  5. TFT LCD显示原理详解

    <什么是液晶> 我们一般认为物体有三态:固态.液态.气态,其实这只是针对水而言,有一些有机化和物 还有介于固态和液态中间的状态 就是液晶态,如下图(一):                 ...

  6. python魔法方法-属性转换和类的表示

    类型转换魔法 类型转换魔法其实就是实现了str.int等工厂函数的结果,通常这些函数还有类型转换的功能,下面是一些相关的魔法方法: __int__(self) 转换成整型,对应int函数. __lon ...

  7. [BZOJ4987]Tree

    题目大意: 给定一棵\(n(n\le3000)\)个点的带边权的树,找出\(k\)个点\(A_{1\sim k}\)使得\(\sum_{1\le i<k} dis(A_i,A_i+1)\)最小. ...

  8. (转)【Java线程】Java内存模型总结

    Java的并发采用的是共享内存模型(而非消息传递模型),线程之间共享程序的公共状态,线程之间通过写-读内存中的公共状态来隐式进行通信.多个线程之间是不能直接传递数据交互的,它们之间的交互只能通过共享变 ...

  9. Android MediaPlayer架构 -- 前言小知识点(一)

    在Android中可以使用MediaPlayer+SurfaceView来实现一个简单的多媒体播放器. 一  构造函数 java MediaPlayer class 的源码位置:frameworks\ ...

  10. unity小知识了解

    在搜索栏的右侧有三个按钮,单击第一个按钮,弹出相应菜单,可以根据目标类型过滤搜索结果.[按钮从左到右] 第二个按钮,提供素材标签来过滤搜索结果,可以自定义标签. 第三个按钮,提供了将搜索结果添加到前面 ...