在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 ...
随机推荐
- C#并行编程(1):理解并行
什么是并行 并行是指两个或者多个事件在同一时刻发生. 在程序运行中,并行指多个CPU核心同时执行不同的任务:对于单核心CPU,严格来说是没有程序并行的.并行是为了提高任务执行效率,更快的获取结果. 与 ...
- Egret 之 消除游戏 开发 PART 6 Egret elimination game development PART 6
Egret 之 消除游戏 开发 PART 6 Egret elimination game development PART 6 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱: ...
- 洛谷.2709.小B的询问(莫队)
题目链接 /* 数列的最大值保证<=50000(k),可以直接用莫队.否则要离散化 */ #include<cmath> #include<cstdio> #includ ...
- Java并发程序设计(十三)锁的性能优化
锁的性能优化 一.优化注意事件 一)减少锁的持有时间 只在必要时进行同步,能明显减少锁的持有时间. 二)锁的细化 缺陷:当系统需要全局锁时,其消耗的资源会比较多. 三)锁的分离 比如读写分离锁 四)锁 ...
- ES-常见搜索方式
1.query string search 2.query DSL 3.query filter 4.full-text search 5.phrase search 6.highlight sear ...
- react-native布局篇
原文链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native%E5%B8%83%E5%B1%80/ 一.宽度和 ...
- JDBC(6)—BeanUtils
1.简介: BeanUtils工具是一种方便我们对JavaBean进行操作的工具,是Apache组织下的产品 2.Java 类的属性: 1>.在JavaEE中java类的属性通过getter和s ...
- windows 64位环境下php执行环境部署配置
1.下载安装包 地址可以网上找,我下载的是php-5.6.27-Win32-VC11-x64.zip 2.解压安装包,我的解压到D:\tools\php5.6 3.配置php.ini 在解压的目录中, ...
- RxJava2学习笔记(2)
上一篇已经熟悉了Observable的基本用法,但是如果仅仅只是“生产-消费”的模型,这就体现不出优势了,java有100种办法可以玩这个:) 一.更简单的多线程 正常情况下,生产者与消费者都在同一个 ...
- ArcGIS中国工具2.5正式发布
ArcGIS中国工具2.5正式发布 1. 支持1:500,1:1000,1:2000的梯形接幅表和图框打印(见3.2) 2. 支持接幅表,一定间隔如1秒加节点生成并能自动识别打印(见3. ...