在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 ...
随机推荐
- hdu 1864 最大报销额【01背包】
题目链接:https://vjudge.net/problem/HDU-1864 题目大意: 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求 ...
- 001.Open-Falcon简介
一 Open-Falcon简介 监控系统是整个运维环节,乃至整个产品生命周期中最重要的一环,事前及时预警发现故障,事后提供翔实的数据用于追查定位问题.监控系统作为一个成熟的运维产品,相对成熟的解决方案 ...
- 聊聊RPC原理二
之前写了一篇关于RPC的文章,浏览量十分感人:),但是感觉文章写得有些粗,觉得很多细节没有讲出来,这次把里边的细节再次补充和说明. 这次主要说的内容分为: 1. RPC的主要结构图. 2.分析结构图的 ...
- 【Ray Tracing The Next Week 超详解】 光线追踪2-6 Cornell box
Chapter 6:Rectangles and Lights 今天,我们来学习长方形区域光照 先看效果 light 首先我们需要设计一个发光的材质 /// light.hpp // ------- ...
- VUE 打包后关于 -webkit-box-orient: vertical; 消失,导致多行溢出不管用问题
VUE 打包后 -webkit-box-orient: vertical; 样式消失,导致页面样式爆炸,看了看解决方案,在这里总结一下: 实际上是 optimize-css-assets-webpac ...
- [ 原创 ] centos安装tomcat,启动成功 无法访问
https://blog.csdn.net/realjh/article/details/82048492 Linux下Centos7对外开放端口 2018年08月25日 09:53:42 jeter ...
- 用type动态创建Form
type时所有元类的父亲object是type(object的类型是type),type也是object(type继承自object) >>> isinstance(object, ...
- centos 7 安装 php 5.5 5.6 7.0
查看当前安装的PHP包 [root@node1 ~]# yum list installed | grep php php56w.x86_64 -.w7 @webtatic php56w-cli.x8 ...
- 毫秒转时间(java.js)
SimpleDateFormat sdf = new SimpleDateFormat( "yyyy-MM-dd HH:mm:ss"); GregorianCalendar gc ...
- python面向对象笔记
一.封装(属性/私有方法/公有方法/静态方法/构造函数...) # 定义一个类 class Animal: # 私有成员(用_开头的约定为私有成员 - 注:仅仅是君子协定) _age = 0 # 构造 ...