美文网首页cube-ui
修改cube-ui比例大小

修改cube-ui比例大小

作者: 谢炳南 | 来源:发表于2019-08-02 15:28 被阅读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

    相关文章

      网友评论

        本文标题:修改cube-ui比例大小

        本文链接:https://www.haomeiwen.com/subject/lamldctx.html