nuxt3中配置px转vw

最新推荐文章于 2024-05-07 15:15:45 发布

m0_63400611

最新推荐文章于 2024-05-07 15:15:45 发布

阅读量341

点赞数 3

分类专栏： Vue 文章标签：前端前端框架

本文链接：https://blog.csdn.net/m0_63400611/article/details/137376357

版权

Vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在Nuxt3中配置postcss-px-to-viewport，包括安装依赖、设置参数如单位转换、视觉稿尺寸等，以实现响应式设计中的像素到视口单位转换。

摘要由CSDN通过智能技术生成

直入主题，进入nuxt中文网查看关于nuxt.config.ts中的配置选项

nuxt3的postcss配置

接下来需要安装相关依赖，如果你是使用npm：

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

剩余可通过github仓库或者官网查看

nuxt.config.ts配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@element-plus/nuxt'], // 引入elementPlus的选项，这里忽略
  postcss: {
    plugins: {
      'postcss-px-to-viewport': {
        unitToConvert: 'px', // 要转换的单位
        viewportWidth: 1920, // 视觉稿的设计宽度
        viewportHeight: 1080, // 视觉稿的设计高度（可选，一般不用配置）
        unitPrecision: 3, // 指定转换后的单位精度
        propList: ['*'], // 要转换的CSS属性列表，'*'表示全部
        viewportUnit: 'vw', // 指定转换为目标单位
        fontViewportUnit: 'vw', // 字体也可以使用vw单位（可选）
        selectorBlackList: [], // 不进行转换的选择器列表
        minPixelValue: 1, // 设置小于或等于多少像素时不转换
        mediaQuery: true, // 是否在媒体查询中也转换px
        replace: true, // 是否直接更换属性值，而不添加备用样式
        exclude: /(\/|\\)(node_modules)(\/|\\)/, // 排除文件路径
      },
    },
  },
})