博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
@vue/cl构建得项目下,postcss.config.js配置,将px转化成rem
阅读量:6893 次
发布时间:2019-06-27

本文共 1019 字,大约阅读时间需要 3 分钟。

依赖包: 

配置:

在项目根目录下创建 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
  • replace (布尔值)替换包含rems的规则,而不是添加回退。
  • mediaQuery (布尔值)允许在媒体查询中转换px。
  • minPixelValue (数字)设置要替换的最小像素值。

需要注意的是:上述配置是脚手架自动生成的文件(并不是自己创建的),即在构建项目时,将babel的配置成单独的文件才可以,否则只能用下面这种方式来配置

如果再构建项目的时候选择将babel配置单独的文件,那么项目会自动生成:.eslintrc.js  postcss.config.js  babel.config.js  .browserslistrc 这几个文件是比选择配置在package.json中的

多出来的

 

 

转载于:https://www.cnblogs.com/zhangycun/p/10762762.html

你可能感兴趣的文章
【经验收集】完全卸载SQLServer 2008 R2的步骤
查看>>
Spring Boot 项目启动顺序以及常见注解作用
查看>>
java基础(2)
查看>>
zabbix安装界面报连接不到数据
查看>>
一首Python的打油诗
查看>>
pjsip 同时使用多套音频设备
查看>>
DevOps:怎么实现源代码注释和系统文档的自动化更新?
查看>>
make 中的路径搜索(十二)
查看>>
zabbix agent 端主动注册
查看>>
初识Mysql(二)
查看>>
监控系统的状态
查看>>
Samba文件共享服务
查看>>
Check Point SMB 操作手册
查看>>
百万PV网站架构案例
查看>>
Redis PHP连接Redis
查看>>
苏研环境gerrit提交
查看>>
还在傻傻用Ctrl+C和Ctrl+V吗?这2个行列转置方法助你效率提80%!
查看>>
webpack4.0各个击破(5)—— Module篇
查看>>
没有什么内存问题,是一行Python代码解决不了的
查看>>
备忘录模式
查看>>