我是如何在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 }

OK,生效

转载于:https://www.cnblogs.com/wsy6566/p/7724582.html

我是如何在webpack中使用postcss-px2rem的相关推荐

我是如何在SQLServer中处理每天四亿三千万记录的
原文地址:http://www.cnblogs.com/marvin/p/HowCanIHandleBigDataBySQLServer.html 首先声明,我只是个程序员,不是专业的DBA,以下这篇 ...
请看:我是如何在SQLServer中处理每天四亿三千万记录的
2019独角兽企业重金招聘Python工程师标准>>> 小中午,无意间读到这篇博客,觉得,文中作者在处理海量数据写入方面,所做的一些尝试,或许可以给同道朋友提供一些帮助,与君共勉. ...
webpack 谷歌地图_如何在Webpack中设置可靠且可维护的Google Analytics（分析）
webpack 谷歌地图 One of the messier bits of a new app setup is trying to figure out where to stash your ...
webpack 处理字体_如何在webpack中更优雅的处理字体图标
作者:牟金涛字体图标是目前前端中最常见的一种静态资源,目前大部分的框架或者网站都会将一些简单的图标合并生成一个字体文件而不是合并成雪碧图.其优点显而易见,字体图标能够更加方便的控制图标的大小和颜色, ...
彻底弄懂Webpack中的Loader机制
一.前言面对这些框架所衍生出来的文件,现代的模块打包工具,例如 Webpack 本身只能处理 js 和 JSON 文件,其他类型文件它是不能够处理的.需要借助 Loader 来处理这些类型的文件, ...
深入浅出的webpack构建工具---PostCss(五)
一:PostCss是什么? PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本 ...
在webpack中使用vue的准备
如何在webpack中使用vue? 1.安装vue的包 : npm i vue -S 2.由于在webpack中,定义组件使用.vue组件模板文件,所以安装能够解析这种文件的loader npm i ...
webpack基础(八)——PostCss
一.什么是PostCss PostCss就是通过js代码来第css进行转换,比如给css加上浏览器前缀.当然这些工作也是需要一些插件来一起完成的. 二.在命令行执行postcss 1.首先安装post ...
webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀前言在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...

我是如何在webpack中使用postcss-px2rem的

我是如何在webpack中使用postcss-px2rem的相关推荐

最新文章

热门文章