@vue/cl构建得项目下,postcss.config.js配置,将px转化成rem
依赖包:
postcss-pxtorem
配置:
在项目根目录下创建 postcss.config.js
配置如下:
module.exports = () => ({
plugins: [
require('autoprefixer')(),
// require('postcss-px2rem')({ remUnit: 75 })
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
});
rootValue(Number)根元素字体大小。unitPrecision(数字)允许REM单位增长的十进制数。propList(数组)可以从px更改为rem的属性。- 值必须完全匹配。
- 使用通配符
*启用所有属性。例:['*'] *在单词的开头或结尾使用。(['*position*']会匹配background-position-y)- 用于
!与属性不匹配。例:['*', '!letter-spacing'] - 将“not”前缀与其他前缀组合在一起。例:
['*', '!font*']
selectorBlackList(数组)要忽略的选择器并保留为px。- 如果value是string,则检查selector是否包含字符串。
['body']会匹配.body-class
- 如果value是regexp,它会检查选择器是否与正则表达式匹配。
[/^body$/]会匹配body但不会.body
- 如果value是string,则检查selector是否包含字符串。
replace(布尔值)替换包含rems的规则,而不是添加回退。mediaQuery(布尔值)允许在媒体查询中转换px。minPixelValue(数字)设置要替换的最小像素值。
需要注意的是:上述配置是脚手架自动生成的文件(并不是自己创建的),即在构建项目时,将babel的配置成单独的文件才可以,否则只能用下面这种方式来配置
如果再构建项目的时候选择将babel配置单独的文件,那么项目会自动生成:.eslintrc.js postcss.config.js babel.config.js .browserslistrc 这几个文件是比选择配置在package.json中的
多出来的
@vue/cl构建得项目下,postcss.config.js配置,将px转化成rem的更多相关文章
- vue3.0 vue.config.js 配置实战
今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...
- vue.config.js配置前端代理
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这 ...
- 【vue-cli 3.0】 vue.config.js配置 - 路径别名
如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...
- vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析
1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装 ...
- webpack2-webpack.config.js配置
写在前面: 了解更多:https://github.com/miaowwwww/webpack-learn 贴一个webpack.ocnfig.js 的配置属性表 一.代码分割: 1.插件 Comm ...
- webpack.config.js配置入口出口文件
目录结构: 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package ...
- 关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
- webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题
下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...
- webpack.config.js====配置babel
参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...
随机推荐
- EmWin 文本显示函数
函数模型----------------------------------- 1:void GUI_DispChar(U16 c): 在当前窗口的当前文本位置处,使用当前字体显示单个字符. c ...
- flume1.4.0源码结构剖析
flume基本思想: source负责收集数据,channel负责缓存数据,sink负责消费channel中的数据,具体使用方式这里不赘述 生命周期管理: 生命周期相关代码在flume-ng-core ...
- java多线程中注入Spring对象问题
web应用中java多线程并发处理业务时,容易抛出NullPointerException. 原因: 线程中的Spring Bean没有被注入.web容器在启动时,没有提前将线程中的bean注入,在线 ...
- 2019.03.28 bzoj3325: [Scoi2013]密码(manacher+模拟)
传送门 题意: 现在有一个nnn个小写字母组成的字符串sss. 然后给你nnn个数aia_iai,aia_iai表示以sis_isi为中心的最长回文串串长. 再给你n−1n-1n−1个数bib_ ...
- PyCharm 安装教程(Windows)
python教程 http://www.runoob.com/python3/python3-basic-syntax.html PyCharm 是一款功能强大的 Python 编辑器,具有跨平台性, ...
- 15. Life Cycle of the Products 产品的生命周期
15. Life Cycle of the Products 产品的生命周期 (1) We can see how the product life cycle works by looking at ...
- MySQL/Oracle索引的创建与使用
MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 索引分单列索引和组合索引. 单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引 ...
- easyUI dialog打开对话框,显示列表数据,选取一条数据操作后赋值给父窗口 resultMap声明为全局,生成getset方法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" ...
- ES6学习:两个面试题目--关于模板字符串
号称看完就能“让开发飞起来”,不过文中的两个面试题目的知识点并没包括在文中. https://www.jianshu.com/p/287e0bb867ae 文中并没有完整的知识点去完成上面的两道题,这 ...
- 在原生Windows安装Keras
既然要深入学习,就不能和时代脱节,所以选择了keras,资源相对比较丰富.由于Windows饱受歧视,各种文档都不推荐使用.但我又没有换系统的成本,所以还是凑合下,毕竟他们给出了方法,稍微折腾一下还是 ...