Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ren2436 opened this issue Apr 18, 2023 · 5 comments
Closed

Comments

@ren2436
Copy link

ren2436 commented Apr 18, 2023

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

image
image

@wswmsword
Copy link
Owner

wswmsword commented Apr 18, 2023

我不确定这个是不是之前版本的问题,可能要麻烦您升下最新版本,看看还有没有这个问题,我给你整了下新版本的配置,我看你装的版本是 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
Copy link
Author

ren2436 commented Apr 18, 2023

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

@ren2436
Copy link
Author

ren2436 commented Apr 18, 2023

node版本为 18.14.2

@wswmsword
Copy link
Owner

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

好,谢谢,我看下

@wswmsword
Copy link
Owner

wswmsword commented Apr 18, 2023

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants