CODEWITHSUNDEEP
vue.jsvuetify.js
Greg Pagendam-Turner
Greg Pagendam-Turner

Reputation: 2492

Vuetify not picking up styl changes

Trying to update style so that buttons are rendered with capitalised case instead of all uppercase.

vue --version is 3.5.5

Added src/stylus/main.styl

$button-text-transform = 'capitalize'
@require '~vuetify/src/stylus/app'

main.js includes:

import "./stylus/main.styl"

Problem is that the text in buttons is still uppercase:

Chrome inspect shows style:

.v-btn {
  text-transform: uppercase;
}

Is there anything else I need to do for the app to pickup the styl?

EDIT: Changed main.styl to:

@import '~vuetify/src/stylus/app'
$button-text-transform = 'capitalize'
@import '~vuetify/src/stylus/main'

Still all uppercase

Upvotes: 4

Views: 887

Answers (1)

Greg Pagendam-Turner
Greg Pagendam-Turner

Reputation: 2492

In the end after investigating webpack and vue-cli all I was able to do was add to App.vue:

<style>
.v-btn {
  text-transform: none;
}
</style>

Upvotes: 2

Related Questions