vuetify重置样式

vuetify中按钮的英文文字默认是大写形式的,怎么把按钮文字这种大写形式的属性给去掉呢,我们可以用scss重置这个css样式。

vuetify重置scss变量https://vuetifyjs.com/zh-Hans/features/sass-variables/#section-57fa672c75286cd5

1.安装scss预处理器

2.创建setting.scss文件

在src目录下创建styles文件夹,在该文件夹下创建setting.scss:

css 复制代码
@use 'vuetify/settings' with (
$button-text-transform: none
);

3.在vite.config.js中进行配置

javascript 复制代码
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import vuetify from 'vite-plugin-vuetify'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vuetify({
      autoImport: true, //按需导入
      styles: { //重置样式
        configFile: 'src/styles/settings.scss',
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

4.效果图

现在按钮的文字不是大写形式的了:

相关推荐
码云之上1 分钟前
聊聊MCP Client及其实践
前端·架构·mcp
dasseinzumtode2 分钟前
ECharts 保留 tooltip.trigger: 'axis'的情况下 实现markPoint tooltip独立自定义悬浮框 功能
前端·echarts
小小小小宇3 分钟前
前端实现图片的上传、缩放、旋转、移动和裁剪
前端
Timo来了4 分钟前
上传图片后预览图片小试
前端
精通搬砖能手4 分钟前
简单实现MVVM框架,轻上手,简单易懂
前端
小桥风满袖4 分钟前
Three.js-硬要自学系列16 (贝塞尔曲线应用、组合曲线、路径管道、旋转成型、轮廓填充)
前端·css·three.js
凯哥19705 分钟前
Sciter.js 指南 - 自定义GUI程序头部-微信聊天窗
前端
用户79832667029413 分钟前
WebStorm插件 SmartInputPro 使用体验分享
前端
Jedi Hongbin15 分钟前
使用Next.js构建单页面React应用
前端·react.js·next.js
程序员张321 分钟前
leaflet-canvasmarker添加的marker旋转问题
前端