module.exports = {
presets: [
'@vue/app'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
plugins: {
autoprefixer: {}
},
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['van-circle__layer']
})
]
}
}
}
};
import 'amfe-flexible';
这样整个rem适配就完成了。
案例：以Vant组件库中的Button按钮为例：
在main.js中引入
//按需引用
import { Button } from 'vant';
Vue.use(Button);
//或者全局引用
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
或者在单文件按需引入
<script>
import { button } from 'vant';
export default {
components:{
'van-button':button
//或者下面的方式
//[button.name]:button }
}
</script>
在结构中
<template>
<div class="home">
<div class='aaa'>111</div>
<van-button disabled type="primary" class="btn">主要按钮</van-button>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<script>
import { button } from 'vant';
export default {
components:{
'van-button':button
//或者下面的方式
//[button.name]:button }
}
</script>
<style lang="scss">
.aaa{
width:187.5px;
background: red;
height:20px;
font-size:18px;
}
.btn{
width: 375px;
height: 100px;
font-size: 18px;
}
</style>
结果如下,仔细看样式,变成了rem
