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

首先需要安装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. FastAdmin 的上传代码在哪里?

    FastAdmin 的上传代码在哪里? FastAdmin 默认是通过 Ajax 上传到本地. 使用 admin/ajax/upload 方式返回 url. 代码文件地址在 application\a ...

  2. Tkinter的下拉列表Combobox

    Tkinter的下拉列表Combobox   tk中下拉列表使用ttk.Combobox,代码如下:   #!/usr/bin/env python   # -*- coding: utf-8 -*- ...

  3. P1939【模板】矩阵加速(数列)

    P1939[模板]矩阵加速(数列)难受就难受在a[i-3],这样的话让k=3就好了. #include<iostream> #include<cstdio> #include& ...

  4. 使用starUML一步一步画顺序图

    顺序图:是UML中能表现出一个过程中各个详细步骤的模型图,过程可以理解为一个功能的执行过程. 下面我们以一个简单的影院管理系统中售票功能为例来一步一步完成顺序图的构建. 建模工具:starUML 版本 ...

  5. 在eclipse总是会运行之前的错误项目

    我改了context root没有用,删了work下面的项目文件也没有用,最后必须要改server的配置,就是在windows下有个server runtimeEnvironment http://b ...

  6. [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序

    2003的access数据库文件后缀是mdb2007的access数据库文件后缀是accdb 我装的access2010所以驱动程序选择“Microsoft Access Driver (*.mdb, ...

  7. db2配置、db和dbm

    ----start DB2 可以在四个不同层面配置: 一:系统环境变量(System Environment Variable) 系统环境变量用来配置DB2 的使用环境: 查看:set | grep  ...

  8. DNS解析全过程分析

    DNS解析过程 1.检查浏览器缓存中是否缓存过该域名对应的IP地址 用户通过浏览器浏览过某网站之后,浏览器就会自动缓存该网站域名对应的IP地址, 当用户再次访问的时候,浏览器就会从缓存中查找该域名对应 ...

  9. PHP内置的预定义常量大全

    URL:http://www.php.net/manual/en/reserved.constants.php 预定义常量:核心预定义常量,标准预定义常量----------------------- ...

  10. Linux下RocketMQ环境的配置

    RocketMQ是一款分布式消息系统,最初是由阿里巴巴消息中间件团队研发并大规模应用于生产系统,满足线上海量堆积的需求,在去年捐赠给Apache开源基金会,并列为孵化项目,今年成功的正式成为了apac ...