在webpack中使用postcss-px2rem的
经过一番折腾重要搞定了。 首先需要安装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的的更多相关文章
- 在webpack中使用postcss之插件包precss
precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package ...
- 在webpack中使用postcss之插件cssnext
学习了precss插件包在webpack中的用法后,下面介绍postcss的另一个重要插件cssnext,步骤没有precss用法详细,主要介绍css4的语法,cssnext目前支持了部分新特性,你可 ...
- 深入浅出的webpack构建工具---PostCss(五)
一:PostCss是什么? PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本, ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- webpack 中使用 autoprefixer
webpack中autoprefixer是配合postcss-loader使用的,首先安装相应资源: npm i -D style-loader css-loader postcss-loader a ...
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...
- webpack中利用require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- webpack中实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- [转] webpack中配置Babel
一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...
- [转]webpack中require和import的区别
webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...
随机推荐
- 提取IPv6地址的编码信息
提取IPv6地址的编码信息 为了保持兼容和地址转化,很多IPv6地址将额外的信息编码到地址信息中,如IPv4地址和Mac地址.在Nmap中,可以使用address-info脚本提取内嵌的信息,并进 ...
- python 列表返回重复数据的下标
class Solution(object): def searchRange(self, nums, target): """ :type nums: List[int ...
- Leetcode分类总结(Greedy)
贪心类题目目前除了正则匹配(Wildcard Matching)(据说其实是DP)那道还没做其他的免费题目都做了,简单做个总结. 贪心的奥义就是每一步都选择当前回合”可见范围“(即可得知的信息)内的最 ...
- Web大前端面试题-Day7
1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复 渐进增强(progressi ...
- HDU.1848.Fibonacci again and again(博弈论 Nim)
题目链接 //求三堆石子的SG函数,异或起来就是整个游戏的SG值 #include <cstdio> #include <cstring> const int N=1005; ...
- BZOJ.4753.[JSOI2016]最佳团体(01分数规划 树形背包DP)
题目链接 \(Description\) 每个点有费用si与价值pi,要求选一些带根的连通块,总大小为k,使得 \(\frac{∑pi}{∑si}\) 最大 \(Solution\) 01分数规划,然 ...
- 2016年3月12日Android学习笔记
1. //此句不能忘,否则onFling左右滑动不起作用 mLlExamView.setLongClickable(true); mLlExamView.setOnTouchListener(new ...
- linux sendmail 发送缓慢的问题
这个问题关键就是hosts里面对于本机host的设置有问题,你可以看下/var/log/mail.log retry 和 sleeping,再加上其他时间,用sendmail发送邮件等这么久,太累了吧 ...
- ADSL理解
ADSL技术提供的上行和下行带宽不对称,因此称为非对称数字用户线路. ADSL技术采用频分复用技术把普通的电话线分成了电话.上行和下行三个相对独立的信道,从而避免了相互之间的干扰.用户可以边打电话边上 ...
- Unity Shader-后处理:简单均值模糊
一.简介 今天来学习一下后处理中比较常用的一种效果,屏幕模糊效果.模糊效果,在图像处理中经常用到,Photoshop中也有类似的滤镜.我们在游戏中也会经常用到.因为屏幕模糊效果是一些高级后处理效果 ...