1.按需引入,有些样式错乱,没有完美解决方案
错误如此文章所示:https://www.cnblogs.com/zph666/p/11168365.html
我的处理方法是,重新写一份样式
2.cube-ui 使用等比布局(rem,vw)都会用户postcss-px-to-viewport 将px转化成(rem,vw),但是无论将viewportWidth设置成750或者375,都会导致cubu组件样式过大或者过小,使用 postcss-design-convert 插件可以完美解决,大致做法:viewportWidth设置成750,这样会导致cube组件非常小,使用postcss-design-convert 可以将cube 数值 乘以2倍,附上postcss.config.js完整配置,安装里面的插件,重新npm run serve即可
参考:https://www.jianshu.com/p/c0fb9b38ba63
module.exports = {
plugins: {
// 'autoprefixer': {},
'postcss-px-to-viewport': {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
},
'postcss-design-convert': {
multiple: 2,
units: ['vw'],
selector: /^.cube-/
}
}
}