wswmsword / postcss-mobile-forever

一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
325 stars 19 forks source link

不明白为什么在 style 中写的 px 值在大屏下,会被转为NaN? #6

Closed ren2436 closed 1 year ago

ren2436 commented 1 year ago

如题,这个怎么破解,是哪里配置有问题么? image

image image

wswmsword commented 1 year ago

我不确定这个是不是之前版本的问题,可能要麻烦您升下最新版本,看看还有没有这个问题,我给你整了下新版本的配置,我看你装的版本是 2.2.2,最新的是 3.2.2:

const autoprefixer = require('autoprefixer')
const viewport = require('postcss-mobile-forever')

const baseViewOpts = {
  rootSelector: "#app",
  viewportWidth: 750,
  unitPrecision: 3,
  propList: ['*'],
  selectorBlackList: ['.ignore', 'keep-px'],
  exclude: /node_modules(?![\\/]vant)/, // <---- 这里的 exclude 不能包括 vant,我看你下面要转换 vant 视图,这里排除 node_modules 所有文件之后 vant 应该也不会转换了
  border: true,
  disableDesktop: false,
  disableLandscape: false,
  mobileUnit: 'vw',
}

module.exports = {
  plugins: [
    autoprefixer(),
    viewport({
      ...baseViewOpts,
      viewportWidth: file => file.includes('node_modules/vant/') ? 375 : 750,
    })
  ]
}

重新卸载再重装就是最新版了:

npm uninstall postcss-mobile-forever
npm i postcss-mobile-forever --save-dev

如果还有问题我及时修复。

ren2436 commented 1 year ago

vite-vue3-test.zip 我使用最新版的搭建了一个最小的包,麻烦您看下,还是有这个问题 我这定位到是这行 出现的问题,注释掉就没问题了 viewportWidth: (file) => (file.includes('node_modules/vant/') ? 375 : 750),

ren2436 commented 1 year ago

node版本为 18.14.2

wswmsword commented 1 year ago

vite-vue3-test.zip 我使用最新版的搭建了一个最小的包,麻烦您看下,还是有这个问题 我这定位到是这行 出现的问题,注释掉就没问题了 viewportWidth: (file) => (file.includes('node_modules/vant/') ? 375 : 750),

好,谢谢,我看下

wswmsword commented 1 year ago

@ren2436 已修复,修复版本是 3.2.3 ^_^

传递计算后的 viewportWidth 值传错了,传成了函数,最后除的函数,结果就是 NaN 了。