修改cube-ui比例大小
2019-08-02 本文已影响0人
谢炳南
postcss-px2rem的比例设置成75 如何让cube ui 的组件也随之变化
1.创建vue项目
2.添加cube-ui
vue add cube-ui
3.在vue项目里添加 postcss-px-to-viewport 和 postcss-design-convert 插件
npm install postcss-px-to-viewport --save
npm install postcss-design-convert --save
4.打开package.json 删除以下代码
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem": {
"remUnit": 37.5
}
}
},
5.在根目录创建 .postcssrc.js 文件(单位转换为vw)
module.exports = {
"plugins":{
'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-/
}
}
}
- 在根目录创建 .postcssrc.js 文件(单位转换为rem)
module.exports = {
"plugins":{
'postcss-design-convert':{
multiple:2,
units:['px'],
selector:/^\.cube-/
},
'postcss-px2rem': {
remUnit: 75
}
}
}
6.运行项目 postcss-px2rem 默认为37.5 的比例就会设置成75