Vue3+TypeScript+Vite+Less 开发 H5 项目(amfe-flexible + postcss-pxtorem)

参考文档

  • amfe-flexible:将根元素 html 的字体大小 fontSize(1rem) 设为 viewWidth / 10,以适配不同终端

  • postcss-pxtorem:将 px 单位转换为 rem 单位

安装依赖

bash 复制代码
pnpm add amfe-flexible
pnpm add postcss-pxtorem -D

引入插件

mian.ts 中引入

ts 复制代码
import 'amfe-flexible'

配置插件

vite.config.ts 中添加相关配置

ts 复制代码
import type { ConfigEnv, UserConfig } from 'vite'
import pxtorem from 'postcss-pxtorem'

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  console.log(command, mode)
  return {
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            themeColor: '#1677ff'
          },
          javascriptEnabled: true,
        }
      },
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 75, // 类型:Number | Function;根元素字体大小,默认 16,一般设置为设计稿尺寸 viewWidth 的 1/10(750 => 75 / 375 => 37.5)
            unitPrecision: 5, // 类型:Number;rem 单位允许的小数位数,默认 5
            propList: ['*'], // 类型:Array,需要将 px 单位转换为 rem 单位的属性列表,默认 ['font', 'font-size', 'line-height', 'letter-spacing']
            selectorBlackList: [] // 类型:Array,需要忽略的选择器列表,不会转换 px 单位,默认 []
            replace: true, // 类型:Boolean,默认 true
            exclude: (file: any) => { // 类型:String | Regexp | Function,要忽略并保持 px 单位的文件路径,默认 /node_modules/i
              if (file.includes('h5'))) {
                // 将所有包含 h5 目录中的文件 px 单位转换为 rem 单位
                return false
              }
              return true
            }
          })
        ]
      }
    }
  }
})
相关推荐
王解16 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
鸿蒙开天组●19 小时前
鸿蒙进阶篇-网格布局 Grid/GridItem(二)
前端·华为·typescript·harmonyos·grid·mate70
zhizhiqiuya19 小时前
第二章 TypeScript 函数详解
前端·javascript·typescript
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
_jiang2 天前
nestjs 入门实战最强篇
redis·typescript·nestjs
清清ww2 天前
【TS】九天学会TS语法---计划篇
前端·typescript
努力变厉害的小超超2 天前
TypeScript中的类型注解、Interface接口、泛型
javascript·typescript
王解3 天前
Jest进阶知识:整合 TypeScript - 提升单元测试的类型安全与可靠性
前端·javascript·typescript·单元测试
Vesper633 天前
【TS】TypeScript 类型定义之联合类型(union types)和交叉类型(intersection types)
linux·ubuntu·typescript