首页 > 其他分享 >vue-cli使用postcss-plugin-px2rem,自动px转rem

vue-cli使用postcss-plugin-px2rem,自动px转rem

时间:2024-07-30 14:43:35浏览次数:13  
标签:vue false cli plugin px rem postcss

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 80, // 换算基数
              // unitPrecision: 5, //允许REM单位增长到的十进制数字。
              // propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
              // propBlackList: [], //黑名单
              exclude: false, // 默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
              // selectorBlackList: [], //要忽略并保留为px的选择器
              // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
              // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
              mediaQuery: false, // (布尔值)允许在媒体查询中转换px。
              minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
            })
          ]
        }
      }
    }
  }
})

不转换 使用 Px

标签:vue,false,cli,plugin,px,rem,postcss
From: https://www.cnblogs.com/xiaoguang911/p/18332315

相关文章

  • Vue3实战案例 知识点全面 推荐收藏 超详细 及附知识点解读
    最近经常用到vue中的一些常用知识点,打算系统性的对vue3知识点进行总结,方便自己查看,另外也供正在学习vue3的同学参考,本案例基本包含Vue3所有的基本知识点,欢迎参考,有问题评论区留言,谢谢。本项目主要还是四个章节目录1.项目结构创建2.页面组件的划分3.页面组件实现3.1N......
  • 计算机毕业设计django+vue《Python数据分析》的教学系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在当今数字化时代,数据分析已成为各行各业不可或缺的技能之一,而Python作为数据分析领域的首选语言,其重要性日益凸显。然而,传统的教学模式在......
  • 【Vue3】前端使用JWT令牌技术的实践方案
    目录技术介绍简单介绍:详细介绍:操作流程1.后端在登录响应里返回jwt2.前端将该变量存入浏览器当中3.前端使用jwt请求的时候作为请求头解码令牌内信息技术介绍简单介绍:        JWT令牌是一种用户校验机制,在登录后服务器会返回用户一个JWT令牌(相当于门票),用......
  • 前端Vue组件化实践:打造灵活可维护的地址管理组件
    随着前端技术的不断演进,复杂度和开发难度也随之上升。传统的一体化开发模式使得每次小小的修改或功能增加都可能牵一发而动全身,严重影响了开发效率和维护成本。组件化开发作为一种解决方案,通过模块化、独立化的开发方式,实现了单独开发、单独维护,并允许组件间的自由组合,从而极大......
  • 前端Vue组件化开发:仿京东淘宝的加入购物车与立即购买弹框组件
    随着前端技术的飞速发展,组件化开发已经成为前端工程化不可或缺的一部分。它不仅能够降低代码的耦合度,提高开发效率,还能够极大地简化后期的维护和扩展工作。在复杂的业务场景下,组件化开发更是成为前端工程师的必备技能。本文将介绍一个基于Vue的前端组件——仿京东淘宝的加入购......
  • vue3 封装request请求
    vue3原生请求封装我这里用一个案例来解释需求:把vue3原生的静态页集成到vue2的若依项目并且可以访问vue2接口在vue3src下的utils下创建文件request.ts文件importaxiosfrom"axios";import{showMessage}from"./status";//引入状态码import{ElMess......
  • vue el-button disabled没有实时生效
    在el-table中,操作按钮中el-button按钮置灰的操作,disable不生效是加了v-if判断,解决方法是添加key="1"<el-table-columnfixed="right"align="center"label="操作"><templateslot-scope="scope">......
  • vue3写pdf文档预览和下载
    1.实现效果:文件列表点击pdf文档可预览,含多页,带下载按钮 2. 用的vue3+vue-pdf-embed版本号可用1.x或2.x:这里我用的1.2.1版本:"vue-pdf-embed":"1.2.1"//安装:[email protected] vue-pdf-embed官方文档:2.0.0版本:https://www.npmjs.com/packa......
  • 基于java+ssm+jsp旅游论坛设计与实现+vue录像(源码+lw+部署文档+讲解等)
    前言......
  • 前端截取视频第一帧图 vue2+elementui
    截取方法extractVideoFrame(video){//创建视频元素constvideoElement=document.createElement('video');videoElement.preload='metadata';videoElement.src=URL.createObjectURL(video);//等待视频元素加载完成return......