木灵鱼儿
阅读:3142
vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单
在引入vant的时候,我看到官方推荐了两个自动转换px为rem的插件,一个叫postcss-pxtorem
,一个叫lib-flexible
。
他们的用法如下:
安装插件:
安装postcss-pxtorem
npm install postcss-pxtorem --save-dev
安装lib-flexible
由于时间的问题,lib-flexible其实已经弃用了,现在是使用名为amfe-flexible
的插件,amfe-flexible实际上就是在lib-flexible的基础上更新的,所以用法都是一样。
npm i -s amfe-flexible
安装完毕只需要引入amfe-flexible
引入插件:
main.js文件引入:
import 'amfe-flexible'
创建配置文件:
在根目录,和package.json同级,创建一个名为postcss.config.js
的文件,然后里面的内容我直接照搬vant提供的。
如果有这个文件,可以自行修改里面的内容,没有才创建。
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
然后保存,这个时候我们再去vue里面,对元素设置px,运行时会发现网页上自动转换成了rem单位。
百度到一个新的配置
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
黑名单
顾名思义,在黑名单中的类名,将不会自动rem转换
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['.van-notify',],
}
}
}
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
解决nuxt使用rem适配样式第一次加载闪烁的问题 amfe-flexible
在使用vant框架的时候,一般都是使用rem自动适配,这个东西有好有坏,具体就不细说,我们这次处理的问题就是使用了rem适配,他样式第一次加载闪烁的问题。其实出现这个问题,大多数都是使用了plugins插件的方式加载rem适配。具体如下:在plugins目录下创建了lib-flexible.js文件,文件名随意打开文件,在里面写入import 'amfe-flexible'打开nuxt.config.js,在plugins中加入代码{ src: '@/plugins/lib-flexible', mode: 'client' },//rem适配这样的确可以使用,但是却产生了首次加载样式会...
vue cli4 创建全局scss变量
之前我的用法就是,哪个组件需要引入这个变量就import引入,现在感觉有点麻烦,就想能不能做一个全局的,所有组件都可以直接引入这个scss文件中的内容。首先我们需要安装一个插件:style-resources-loadervue add style-resources-loader回车后会有提示四个选项,我们scss就选择scss然后回车。安装完毕后在项目根目录创建一个vue的配置文件,有就不用创建,直接用。创建vue.config.js文件,将下面的代码丢进去,自己改下路径地址:const path = require("path"); module.exports...