依赖包:

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
  • 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的更多相关文章

  1. vue3.0 vue.config.js 配置实战

    今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...

  2. vue.config.js配置前端代理

    // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这 ...

  3. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  4. 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.安装 ...

  5. webpack2-webpack.config.js配置

     写在前面: 了解更多:https://github.com/miaowwwww/webpack-learn 贴一个webpack.ocnfig.js 的配置属性表 一.代码分割: 1.插件 Comm ...

  6. webpack.config.js配置入口出口文件

    目录结构: 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package ...

  7. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  8. 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 一. 问题描述 在 ...

  9. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

随机推荐

  1. 推荐一款Notepad++主题Dracula

    https://draculatheme.com/notepad-plus-plus/ Activating theme Go to %AppData%\Notepad++\themes Place  ...

  2. shell脚本编写某一文件夹内拷贝某一段文件(有则跳过没有则拷贝)

    必须是同一台服务器下,或者挂载目录,不同服务器下没办法查询目录中是否有该文件 如果不在同一服务器下,可以把要查询的那个服务器的文件夹设置共享挂在到当前服务器 或者可以把脚本写到要拷贝的服务器上,那么s ...

  3. 利用IO和File类实现拷贝文件目录问题

    /* 复制文件夹 参数 File src,File dest */ public static void copy(File src,File dest){ if (src.isDirectory() ...

  4. SSH通过密钥登陆

    A服务器上操作 ssh-keygen -t rsa/dsa 后面所带参数rsa/dsa为加密方式,默认为dsa [root@localhost ~]# ssh-keygen Generating pu ...

  5. 申请的阿里云主机ubuntu系统无法显示中文

    系统ubuntu 16.04,中文的文件名也无法显示,因为中文包没安装,安装如下: sudo apt-get -y install language-pack-zh-hans sudo apt-get ...

  6. 在windows上安装VTK

    看了很多教程,花了1天半的时间装上了,记录下. 前置条件:我安装了VS2015,用来编译工程. 参考资料 官方:http://www.vtk.org/Wiki/VTK/Building 安装:http ...

  7. stringstream

    C++引入了ostringstream.istringstream.stringstream这三个类,要使用他们创建对象就必须包含sstream.h头文件. istringstream类用于执行C++ ...

  8. js操作bom和dom

    Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...

  9. Redhat7配置ali-yum源

    1.删除所有包 rpm -qa|grep yum|xargs rpm -e --nodeps 2.下载相关文件 下载地址  https://mirrors.aliyun.com/centos/7/os ...

  10. 《高质量C++&C 编程指南》学习笔记

    这本电子书是在国科大上课时候,老师在课件资源里边提供的.之所以会重视这个文件,是因为本科时候,有个老师提到过:那个学生遍的代码很整齐,看起来让人舒服,我就知道工大留不下他.因此,我就格外注意这件事,但 ...