cube-ui

修改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-/
       }
    }
}
  1. 在根目录创建 .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

上一篇下一篇

猜你喜欢

热点阅读