美文网首页
vue第三方ui库和rem适配问题,忽略指定文件

vue第三方ui库和rem适配问题,忽略指定文件

作者: 道翼 | 来源:发表于2020-11-20 16:07 被阅读0次

    背景:需要做一个大屏数据展示,因为是后端,找的模板进行嵌套,但是在套进element后台的时候出现rem不适配的问题,进行解决

    过程:找了很多个帖子,最后在一个源头贴上找到了答案,我想问那些直接抄都抄不好的大佬们,你们的良心不会痛吗,搬砖搬全好吗,emmmm

    1.安装插件(这个插件是一个大佬自己改出来的,万分感谢,链接在下面)

    npm i postcss-px2rem-exclude

    1. 新建utils/rem.js文件(搬砖过来的)
    // 基准大小
    const baseSize = 32
    // 设置 rem 函数
    function setRem () {
      // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
      const scale = document.documentElement.clientWidth / 750
      // 设置页面根节点字体大小
      document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem()
    }
    
    1. 引入js文件到main.js
    import './utils/rem.js'
    
    1. 写入根目录文件 postcss.config.js 或 postcss.js,如果是第三方或者第四方模板,用 | 分割指定文件夹,我是卡在这一步上,一直没搞定,直到看到下面的链接
    module.exports = {
      'plugins': {
        'postcss-px2rem-exclude': {
          remUnit: 75,
          exclude: /node_modules|folder_name/i
          //例:exclude: /node_modules|styles|layout|components/i
        }
      }
    }
    

    搬砖链接:
    插件地址
    帖子链接

    相关文章

      网友评论

          本文标题:vue第三方ui库和rem适配问题,忽略指定文件

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