Vant: 设计稿是750px，根元素应该设置75，但是vant转换后好小，要改成35才行

Created on 29 May 2018  ·  42Comments  ·  Source: youzan/vant

require('postcss-pxtorem')({
rootValue: 75, //默认根目录字体大小(px)
unitPrecision: 5, //保留小数位
propList: ['*'],
// selectorBlackList: [''], //过滤的类名
replace: true, //默认直接替换属性
mediaQuery: false,
minPixelValue: 6, //所有小于设置的样式都不被转换
}),

但是改了设计稿的宽度又对不上了，有什么好的解决方案

picture lyseky

Most helpful comment

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试 if (file && file.dirname && file.dirname.indexOf("vant")>-1) { remUnit = 37.5; } else { remUnit = 75; } return { plugins: [ px2rem({ remUnit: remUnit, }), AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] }) ] }; };

picture webaifei on 26 Oct 2018
👍21 🎉6 🚀1

All 42 comments

我的问题是postcss-pxtorem对vant的样式不生效，不知道怎么配置呢

Xuemuyang picture Xuemuyang on 29 May 2018

@Xuemuyang 样式要手动导入import 'vant/lib/vant-css/index.css'

lyseky picture lyseky on 29 May 2018

@lyseky 使用 babel-plugin-import 插件之后，怎么处理？

MinosIE picture MinosIE on 30 May 2018

@MinosIE 在postcss.config.js上添加
module.exports = {
plugins: [
require('autoprefixer')({
remove: false
}),
require('postcss-pxtorem')({
rootValue: 35, //默认根目录字体大小(px)
unitPrecision: 5, //保留小数位
propList: ['*'],
// selectorBlackList: [''], //过滤的类名
replace: true, //默认直接替换属性
mediaQuery: false,
minPixelValue: 6, //所有小于设置的样式都不被转换
}),
require('postcss-border-width')()
]
}

lyseky picture lyseky on 30 May 2018

这么配置vant内部的css样式会转成rem吗，我这里不会，应该是postcss没有对node_modules里的模块做处理

Xuemuyang picture Xuemuyang on 30 May 2018

rem 适配文档已更新 https://youzan.github.io/vant/#/zh-CN/quickstart

chenjiahan picture chenjiahan on 30 May 2018

@lyseky 这样配置之后 自己写的样式会转换，但是 引用vant的样式不会转换。有的是rem，有的是px，这怎么搞？

MinosIE picture MinosIE on 31 May 2018

修改utils.js配置
css: generateLoaders('postcss'),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
这样就可以了

shaoxiong789 picture shaoxiong789 on 27 Jun 2018
👍2

@lyseky @chenjiahan vant使用的rootValue为37.5，但设计稿为75，怎么协调

vonweb picture vonweb on 5 Jul 2018
👍6

@vonweb vant 不限制 rootValue

chenjiahan picture chenjiahan on 5 Jul 2018

@chenjiahan 如果rootValue设置为75的话，vant组件很小，vant应该是按照@1x设置的大小

vonweb picture vonweb on 6 Jul 2018

@vonweb vant 并没有按照什么值设置，这个是看你根元素的 font size 的

chenjiahan picture chenjiahan on 6 Jul 2018

@chenjiahan 是按照淘宝解决方案设置的，iphone 6根元素font-size： 75px
现在想到的解决方案就是rootValue设为37.5，自己的scss样式使用mixin处理
如果只用有赞的UI库没有问题，再使用其他第三方库就又有问题了

vonweb picture vonweb on 6 Jul 2018

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试 if (file && file.dirname && file.dirname.indexOf("vant")>-1) { remUnit = 37.5; } else { remUnit = 75; } return { plugins: [ px2rem({ remUnit: remUnit, }), AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] }) ] }; };

webaifei picture webaifei on 26 Oct 2018
👍21 🎉6 🚀1

: ) 貌似问题也没有解决啊

MaxMooc picture MaxMooc on 22 Nov 2018

@chenjiahan 按照官网提供的rem解决方案，对于忽略node_modules文件夹还是没有找到合理的解决方案。只是按照过滤类名的方式进行修改。有没有什么更好的方法，谢谢。

postcss.config.js 配置如下

module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['van']
}
}
}

yangdengcheng picture yangdengcheng on 3 Dec 2018

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}
laogui picture laogui on 17 Dec 2018

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的 我也是根据文件名字判断 引入的vant样式 都带有vant

carrot-wu picture carrot-wu on 7 Jan 2019
👍2

@chenjiahan 按照官网提供的rem解决方案，对于忽略node_modules文件夹还是没有找到合理的解决方案。只是按照过滤类名的方式进行修改。有没有什么更好的方法，谢谢。

postcss.config.js 配置如下

直接在根目录下新建 postcss.config.js 没有效果呢？是什么原因呢

chencheng365 picture chencheng365 on 21 Mar 2019

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的 我也是根据文件名字判断 引入的vant样式 都带有vant

这个方案也许可以， 但问题来了， 在vue-cli3里只能在vue.config.js里面配置， 它不允许postcss参数是个函数，这样要怎么配置呢？

kakaxiu picture kakaxiu on 27 Apr 2019

找到一个解决方案，
selectorBlackList: ['van-']
可以过滤不处理所以带有'van-'开头的类名，vant组件就可以不被影响了。
但是用了这个方法就不要主动修改vant组件的样式，除非你给组件起一个别的不包含'vant-'的类名。

kakaxiu picture kakaxiu on 27 Apr 2019
👀3 👍1

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的 我也是根据文件名字判断 引入的vant样式 都带有vant

这个方案也许可以， 但问题来了， 在vue-cli3里只能在vue.config.js里面配置， 它不允许postcss参数是个函数，这样要怎么配置呢？

我也是vuecli3有没有合适的解决方案呢？

curryhh picture curryhh on 20 May 2019

@webaifei这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是postcss-px-to-viewport转换vw单位的：

// postcss.config.js 
const  join  =  require（ ' path '）。加入
常量 tailwindJS  =  加入（ __dirname， ' tailwind.js '）
模块。出口 =（{文件}） => {
  让 vwUnit //判断条件请自行调整我使用的是普通话-移动UI没有对VANT引入进行测试
  ，如果（文件 &&  文件。目录名 &&  文件。目录名。的indexOf（' vant '） >  - 1）{
    vwUnit =  375 
  } else {
    vwUnit =  750
  }
  返回 {
    插件： [
       require（' tailwindcss '）（tailwindJS），
       require（' postcss-px-to-viewport '）（{
        viewportWidth ： vwUnit，
        unitPrecision ： 3，
        viewportUnit ： ' vw '，
        selectorBlackList ： [ '. ignore '，'。 hairlines ' ]，
        minPixelValue ： 1，
        mediaQuery ： false
      }）
    ]
  }
}

对的我也是根据文件名字判断引入的vant样式都带有vant

这个方案也许可以，但问题来了，在vue-cli3里只能在vue.config.js里面配置，它不允许postcss参数是个函数，这样要怎么配置呢？

我也是vuecli3有没有合适的解决方案呢？

在根目录下新建一个.postcssrc.js文件就可以了 vue-cli3也支持的 不过注意的是新版的vant改了目录结构 你可以试试我这种配置
module.exports = (ctx) => { const isNormalDpr = /\.css$/.test(ctx.file.basename) && /\bvant\b/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

carrot-wu picture carrot-wu on 20 May 2019

@webaifei这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是postcss-px-to-viewport转换vw单位的：

// postcss.config.js 
const  join  =  require（ ' path '）。加入
常量 tailwindJS  =  加入（ __dirname， ' tailwind.js '）
模块。出口 =（{文件}） => {
  让 vwUnit //判断条件请自行调整我使用的是普通话-移动UI没有对VANT引入进行测试
  ，如果（文件 &&  文件。目录名 &&  文件。目录名。的indexOf（' vant '） >  - 1）{
    vwUnit =  375 
  } else {
    vwUnit =  750
  }
  返回 {
    插件： [
       require（' tailwindcss '）（tailwindJS），
       require（' postcss-px-to-viewport '）（{
        viewportWidth ： vwUnit，
        unitPrecision ： 3，
        viewportUnit ： ' vw '，
        selectorBlackList ： [ '. ignore '，'。 hairlines ' ]，
        minPixelValue ： 1，
        mediaQuery ： false
      }）
    ]
  }
}

对的我也是根据文件名字判断引入的vant样式都带有vant

这个方案也许可以，但问题来了，在vue-cli3里只能在vue.config.js里面配置，它不允许postcss参数是个函数，这样要怎么配置呢？

我也是vuecli3有没有合适的解决方案呢？

在根目录下新建一个.postcssrc.js文件就可以了 vue-cli3也支持的 不过注意的是新版的vant改了目录结构 你可以试试我这种配置
module.exports = (ctx) => { const isNormalDpr = /\.css$/.test(ctx.file.basename) && /\bvant\b/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

看不懂 你的解释，ctx是改为van吗 还是怎么弄呢？

curryhh picture curryhh on 20 May 2019

module.exports = (ctx) => { const isNormalDpr = /.css$/.test(ctx.file.basename) && /bvantb/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

看不懂 你的解释，ctx是改为van吗 还是怎么弄呢？

不用改 你直接console.log（ctx）就知道了 这个是当前vant文件的上下文 如果读到是vant的css文件那么久应用下面的插件

carrot-wu picture carrot-wu on 20 May 2019

module.exports = (ctx) => { const isNormalDpr = /.css$/.test(ctx.file.basename) && /bvantb/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

看不懂 你的解释，ctx是改为van吗 还是怎么弄呢？

不用改 你直接console.log（ctx）就知道了 这个是当前vant文件的上下文 如果读到是vant的css文件那么久应用下面的插件

直接复制弄进去吗？弄不了啊

curryhh picture curryhh on 20 May 2019

module.exports = (ctx) => { const isNormalDpr = /.css$/.test(ctx.file.basename) && /bvantb/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

看不懂 你的解释，ctx是改为van吗 还是怎么弄呢？

不用改 你直接console.log（ctx）就知道了 这个是当前vant文件的上下文 如果读到是vant的css文件那么久应用下面的插件

可以给个邮箱或什么的直接交流吗？

curryhh picture curryhh on 20 May 2019

知道问题了 各位可以如果要用.postcssrc.js首先要把package.json的postcss去掉要不然是忽略自定义的.postcssrc.js

curryhh picture curryhh on 21 May 2019
👍1

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试 if (file && file.dirname && file.dirname.indexOf("vant")>-1) { remUnit = 37.5; } else { remUnit = 75; } return { plugins: [ px2rem({ remUnit: remUnit, }), AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] }) ] }; };

这个完美解决

wustzhaohui picture wustzhaohui on 22 Jun 2019

const { sep } = require('path')
module.exports = ({ file }) => {
let rootValue = file.dirname.indexof(node_modules${sep}vant) !== -1 ? 37.5 : 75
return {
plugins: {
'autoprefixer': {},
'postcss-pxtorem': {
rootValue,
propList: ['*']
}
}
}
}

fyh0714 picture fyh0714 on 16 Aug 2019
👍3 😄1

请问下，如果我不是用webpack，只是单纯的引入 src/link 引入文件，那么如何vw适配呢？
看的文章全部是webpack 的

nongzhenli picture nongzhenli on 5 Sep 2019

require（'postcss-pxtorem'）（{
rootValue：75，//根目录字体大小（px）
unitPrecision：5，//保留小数位
propList：['*']，
// selectorBlackList：['']， //过滤的类名称
replace：true，//将其直接替换属性
mediaQuery：false，
minPixelValue：6，// //所有小于设置的样式都不被转换
}），

但是改了设计稿的宽度又对不上了，有什么好的解决方案

https://www.cnblogs.com/yimei/p/11319657.html
看一下这片文章就可以了

sxp17600056616 picture sxp17600056616 on 21 Oct 2019

找到一个解决方案，
selectorBlackList: ['van-']
可以过滤不处理所以带有'van-'开头的类名，vant组件就可以不被影响了。
但是用了这个方法就不要主动修改vant组件的样式，除非你给组件起一个别的不包含'vant-'的类名。

不主动修改样式之后，这个组件也没有做适配怎么解决呢

huangrong6996 picture huangrong6996 on 12 Nov 2019

组件中有些行内样式你们是怎么处理的啊？

guagezuishuai picture guagezuishuai on 1 Jan 2020

@curryhh 这个方案完美！

sunny920406 picture sunny920406 on 3 Feb 2020

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试 if (file && file.dirname && file.dirname.indexOf("vant")>-1) { remUnit = 37.5; } else { remUnit = 75; } return { plugins: [ px2rem({ remUnit: remUnit, }), AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] }) ] }; };

这是单独写在postcss.config.js文件中的配置，那请问如果要写在webpack配置文件中该怎么写呢，貌似无法获取file参数

GDCPedro picture GDCPedro on 27 Apr 2020

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试 if (file && file.dirname && file.dirname.indexOf("vant")>-1) { remUnit = 37.5; } else { remUnit = 75; } return { plugins: [ px2rem({ remUnit: remUnit, }), AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] }) ] }; };

这个完美解决

vue.config.js 里面怎样使用的？

fangcongcong picture fangcongcong on 1 Aug 2020

@fangcongcong 在postcss.config.js里面配置，附上一份

const autoprefixer = require('autoprefixer')
const px2vw = require('postcss-px-to-viewport')
const px2px = require('postcss-px-adjust')

const useRelativeUnit = false // 是否启用相对单位
const ignorePackages = [
  'vant',
  '@fe'
]
module.exports = ({ file }) => {
  const isIgnorePackage = file && file.dirname && ignorePackages.find(item => file.dirname.indexOf(item) > -1)  // 忽略第三方包的样式处理
  const basePlugins = [autoprefixer()]
  const extPlugins = []

  if (useRelativeUnit) {
    extPlugins.push(
      px2vw({
        unitToConvert: 'px',
        viewportWidth: isIgnorePackage ? 375 : 750, // 设计稿基准尺寸
        unitPrecision: 5,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        exclude: [],
        landscape: false
      })
    )
  } else {
    if (!isIgnorePackage) {
      extPlugins.push(
        px2px({
          unit: 'px',
          replace: (match, value, unit) => {
            return parseFloat((value / 2).toFixed(5)) + unit
          },
          mediaQuery: false
        })
      )
    }
  }

  return {
    plugins: [
      ...basePlugins,
      ...extPlugins
    ]
  }
}
anrananran picture anrananran on 3 Aug 2020

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的 我也是根据文件名字判断 引入的vant样式 都带有vant

这个方案也许可以， 但问题来了， 在vue-cli3里只能在vue.config.js里面配置， 它不允许postcss参数是个函数，这样要怎么配置呢？

我也是vuecli3有没有合适的解决方案呢？

https://cli.vuejs.org/zh/guide/css.html#postcss 明确说明了你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

但需要自己注意的是配置源要唯一。

DoubleRayWang picture DoubleRayWang on 27 Sep 2020

推荐一个项目示例地址参考,里面配置了vm和rem的适配 示例地址

项目是vue3.0+vant3.0.0-beta.4版本来构建的

xiaoai7904 picture xiaoai7904 on 23 Oct 2020

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试 if (file && file.dirname && file.dirname.indexOf("vant")>-1) { remUnit = 37.5; } else { remUnit = 75; } return { plugins: [ px2rem({ remUnit: remUnit, }), AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] }) ] }; };

这个完美解决

vue.config.js 里面怎样使用的？

vue.config.js里面可以这么去写，rootValue 可以设置回调的
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*'],
minPixelValue: 1,
})
],
}
},
}

TravelleRjq picture TravelleRjq on 21 Nov 2020

可以试下这样去配套组合使用
style的转换：postcss-pxtorem + amfe-flexible
html行内标签的转换：style-vw-loader
怎么装自行百度
这里就贴下怎么配置vue.config.js
module.exports = {
chainWebpack: config => {
config.module.rule('vue').test(/.vue$/)
.use('style-vw-loader')
.loader('style-vw-loader')
.options({
unitToConvert: 'px',
viewportWidth: 7500,
unitPrecision: 5,
viewportUnit: 'rem',
fontViewportUnit: 'rem',
minPixelValue: 1
})
},
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*'],
minPixelValue: 1,
})
],
}
},
}
}

TravelleRjq picture TravelleRjq on 21 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

353170753 picture 353170753  ·  3Comments
abj3ct10n picture abj3ct10n  ·  4Comments
skyzfdance picture skyzfdance  ·  3Comments
VancySavoki picture VancySavoki  ·  4Comments
six-666 picture six-666  ·  4Comments