我想知道关于开发项目引入该组件库后的组件的适配问题,由于我的项目用了postcss-pxtorem,将px自动转成rem,导致该组件库的组件样式 也px转成 rem了。

如picker组件,在iphone X上:

image.png

在iphone 8 plus上:

image.png

发布于 2020-11-20 18:49
共2个回答
AD
游客AdtNgf

修改postcss.config.js文件:

module.exports = ({ file }) => {
    let remUnit
    if (file && file.dirname && file.dirname.indexOf("nut")>-1) {
        remUnit = 37.5
    } else {
        remUnit = 75
    }
    return {
        plugins: {
            'postcss-pxtorem': {
                rootValue: remUnit,
                propList: ['*']
            }
        }
    }
}
KN
游客KnHhFZ

另外一种方案,转换的时候排除node_modules文件夹,修改vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      scss: {
        // @/ 是 src/ 的别名
        // 注意:在 sass-loader v7 中,这个选项名是 "data"
        prependData:
          ` 
          @import "@/styles/custom_theme.scss";
          @import "@nutui/nutui/dist/styles/index.scss";
          `
      },
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 37.5,
            propList: ['*'],
            exclude: 'node_modules'   // 排除node_modules,不对node_modules 中的内容进行转换
          })
        ]
      }
    }
  }
}
回答问题