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

首先需要安装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. ApplicationListener<ContextRefreshedEvent>接口,Spring启动后获取所有拥有特定注解的Bean

    最近项目中遇到一个业务场景,就是在Spring容器启动后获取所有的Bean中实现了一个特定接口的对象,第一个想到的是ApplicationContextAware,在setApplicationCon ...

  2. php快速无限遍历递归文件夹目录、子文件,支持绝对路径和相对路径,支持返回生成数组

    支持无限极遍历子文件及文件夹,支持绝对路径和相对路径! 函数说明:array glob ( string $pattern [, int $flags ] )功能:寻找与模式匹配的文件路径,返回包含匹 ...

  3. loj#2071. 「JSOI2016」最佳团体

    题目链接 loj#2071. 「JSOI2016」最佳团体 题解 树形dp强行01分规 代码 #include<cstdio> #include<cstring> #inclu ...

  4. 11.2 正睿停课训练 Day15

    目录 2018.11.2 正睿停课训练 Day15 A 郁闷的小G(二分) B 小G的树(树形DP) C 数的距离(思路) 考试代码 B C 2018.11.2 正睿停课训练 Day15 时间:3.5 ...

  5. 用面向对象计算BMI指数

    from __future__ import division class Student: def __init__(self,name,weight,height): self.name=name ...

  6. 在java中构建json对象,返回给前端页面

    // 给客户端返回一个json对象 StringBuilder sb = new StringBuilder("{"); sb.append("\"name\& ...

  7. bzoj 3450 期望分数

    自己只能想到O(n^2)的: dp[i][j] 表示 以i结尾,长度为j的o串的概率,然后在每次遇到x的时候算分数. 正解是: dp[i]表示前i个的答案,d[i]表示以i结尾的期望长度. 推的时候它 ...

  8. Unity 4.0 中的新动画系统——MecAnim

    分享一个文档资料,关于动画系统的,版本应该很老了,但是有借鉴意义的: Unity 4.0 已于 2012 年 11 月 15 日正式发布,Unity 每一次版本的提升,都给游戏开发者带来惊喜,这一次也 ...

  9. Windows10系统重置网络设置

    使用Windows10系统户很可能会遇到网络异常,连接不上网的情况? 如此,简易方法可以尝试下.重置网络,教程如下: 1.//按下WIN+X(或右键点击开始按钮),然后选择“命令提示符(管理员)”; ...

  10. MAC自动脚本

    链接: crontab 详细用法 定时任务 Linux crontab命令 定时任务 用法详解以及no crontab for root解决办法