vue-cli3.0 使用 postcss-pxtorem（postcss-px2rem）自动转换p

时飞发布于2019-08-23 11:57 / 1485人阅读

摘要：如何在中使用在中。先上代码，的配置如下换算的基数忽略转换正则匹配项如果是使用，都差不多换算的基数记得安装包可能遇到的坑插件会转化所有的样式的。比如引入了三方，也会被转化。目前我使用字段，来过滤。可以简单的使用大写的或。

如何在vue-cli3.0中使用 postcss-pxtorem

在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中。

先上代码，vue.config.js的配置如下

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-pxtorem")({
                        rootValue : 1, // 换算的基数
                        selectorBlackList  : ["weui","mu"], // 忽略转换正则匹配项
                        propList   : ["*"],
                    }),
                ]
            }
        }
    },
}

如果是使用 postcss-px2rem，都差不多

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-px2rem")({remUnit: 30}), // 换算的基数
                ]
            }
        }
    },
}

记得npm i 安装包；

可能遇到的坑：

插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤。但是感觉不太靠谱。如果有更好的办法欢迎大佬补充

如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。

GPU云服务器云服务器 px2rem js 数据自动转换 js 数据类型的自动转换为什么c语言自动转换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97735.html

PostCSS自学笔记（二）【番外篇一】

摘要：通过配置规则和单位使用或来解决。其他关于我个人的一系列学习介绍及总结有兴趣可以参阅自学笔记一安装使用篇自学笔记二插件篇自学笔记二番外篇一自学笔记二番外篇二利用PostCSS解决移动端REM适配问题上一期有提到结合postcss-px2rem插件来处理移动端适配的方案，以及相关的避坑方法，之后总觉得这个解决方案问题太多，也就诞生了另一套方案运用postcss-pxtorem插件来进行...

Harpsichord1207 2019-08-29 13:17 评论0 收藏0
如何在vue中实现px自动转换成rem,实现多手机的尺寸适配问题？

摘要：安装插件在终端执行在中配置使用适配倍屏，倍屏的封装的将根据已有的标签来设置缩放比例下，对于和的屏，用倍的方案，其余的用倍方案其他设备下，仍旧使用倍的方案在入口文件中引入在中就可以愉快的编写啦，使用，下面上传 1.安装插件postcss-px2rem在终端执行：npm install postcss-px2rem --save2.在build/vue-loader.conf.js 中配置...

xiaoxiaozi 2019-08-23 15:41 评论0 收藏0
todo-list 项目问题总结（使用 react 进行开发）

摘要：项目问题总结这个项目，很简单，前端使用，后端使用进行开发。方便移动端开发。当动画结束后，有一个钩子函数可以使用其他一些功能组件，都是自己尝试去编写的，像日历组件组件组件等。版本的，是没有任何的钩子函数，我就感觉懵逼了。。。 todo-list 项目问题总结这个 todo-list 项目，很简单，前端使用 react，后端 nodejs 使用 koa2 进行开发。数据库使用 Mysql...

shengguo 2019-08-22 15:37 评论0 收藏0
vue-cli3 搭建的前端项目基础模板

摘要：基于搭建的前端模板，本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎或特性预编译语言，做了一定的封装，详见雪碧图移动的适配方案引入了及，可以自由地用去开发常用的工具类引用全局注入相关的文件，如通用的及等常用的的集合支持基于 vue-cli3 搭建的前端模板，clone 本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎 star 或 fork 特性 CSS 预编译语言...

william 2019-08-26 12:24 评论0 收藏0