移动端H5应用,使用了postcss-px-to-viewport插件,750设计稿兼容Vant框架

发布于:2024-07-04 ⋅ 阅读:(95) ⋅ 点赞:(0)

目前在搞一个移动端的H5项目,使用的是Vue3+Vant框架。设计稿是750的,而且使用了postcss-px-to-viewport。所以发现使用Vant框架的时候,发现有点问题,好像缩小了,后来百度了一下,是需要设置portcss.config.js。
exclude: [/node_modules/vant/] // 这里排除对vant的转换
exclude: [/node_modules/vant/] // 这里排除对vant的转换
exclude: [/node_modules/vant/] // 这里排除对vant的转换

下面是代码:
正常配置:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
    unitToConvert: 'px', // 要转换的单位
      viewportWidth: 750, // 设计稿宽度
      selectorBlackList: ["favor"],
      exclude: [/node_modules\/vant/] // 这里排除对vant的转换
    },
  },
};

报错时候的配置:
报错提示:

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: E:/学习文件夹/Vue3相关/fy-trip): [ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'E:\学习文件夹\Vue3相关\fy-trip\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file 
extension.
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'E:\学习文件夹\Vue3相关\fy-trip\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file 
extension.
    at file:///E:/%E5%AD%A6%E4%B9%A0%E6%96%87%E4%BB%B6%E5%A4%B9/Vue3%E7%9B%B8%E5%85%B3/fy-trip/postcss.config.js:2:1
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:475:24)
    at async importDefault (file:///E:/%E5%AD%A6%E4%B9%A0%E6%96%87%E4%BB%B6%E5%A4%B9/Vue3%E7%9B%B8%E5%85%B3/fy-trip/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:29220:18)
    at async Object.search (file:///E:/%E5%AD%A6%E4%B9%A0%E6%96%87%E4%BB%B6%E5%A4%B9/Vue3%E7%9B%B8%E5%85%B3/fy-trip/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:21476:42)]

Node.js v22.2.0

使用下面这个

export default{
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转换的单位
      viewportWidth: 750, // 设计稿宽度
      selectorBlackList: ["favor"],
      exclude: [/node_modules\/vant/] // 这里排除对vant的转换
    }
  }
}

一、安装插件:postcss-px-to-viewport

$ npm install postcss-px-to-viewport --save-dev

二、自己创建portcss.config.js文件,和package.json平级

完成。


网站公告

今日签到

点亮在社区的每一天
去签到