Sass variables

[thany]

I'm reading through this documentation: https://vuetifyjs.com/en/features/sass-variables/#component-specific-variables
Sorry if this is gonna seem ranty.

And I just don't understand what I'm supposed to do here. What are the actually working order of steps to undertake, to get something simple working, like for a start, the background colour of a button?

So if I try the "Basic Usage" bit by creating a main.scss and putting the example code in it, all I get is an error:

[plugin:vite:css] [sass] expected "$".
  ╷
2 │   // variables go here
  │                       ^
  ╵

So I need to put something, but what? Where can I find the list of options? Why is this not linked from the aforementioned documentation page? Apparently it's vitally important to insert at least one variable. This needs fixing. Documentation like "Basic Usage" needs to work.

And I can't just add any variable, or it will go:

[plugin:vite:css] [sass] This variable was not declared with !default in the @used module.
  ╷
2 │   $foo: 42,
  │   ^^^^^^^^
  ╵

So again, what are my options? This is basically impossible to know without any documentation on them, and no intellisense.

Reading further, it says I need to create a settings.scss. Yeah fine, but I still have an erroeous main.scss, lads... What do I do with that one? But I guess I'll just press on. So I create the settings.scss, make the neccesary modification in vite.config.ts and hopefully that's it?

Well, maybe if I understand this bit:

What? Like actually what? What does it want me to do do exactly? What is meant here?

Is this settings.scss replacing the earlier instructed main.scss or something? And then there are 2 (or 2 and a half) options to get that to work? Why not describe one single known working way first, and then in "Advanced Usage" or something, list a thousand other techniques you might employ? This is super confusing currently.

---

So I've come up with something that at least doesn't error:

main.scss:

@use 'vuetify';

settings.scss:

@use 'vuetify/settings' with (
  $button-background: red,
);

• plugins/vuetify.ts contains styles like so: import '../styles/main.scss';
• vite.config.ts contains vuetify plugin like so: vuetify({ styles: { configFile: 'src/styles/settings.scss' }})

And the red button background is being applied. But is this correct? The documentation doesn't show me to do this. This is the result of guesswork based on bits of documentation cobbled together to form something that resembles a cohesive set of styles. But again, I have no clue why this works, or if this is the correct way to go.

---

So this is where I get sort of stuck.

I need a list of clearly followable steps to undertake, to get this to work. Can somebody please help me? And then please also update the documentation to be crystal clear, unambiguous, and not producing errors that will undoubtedly throw off every novice user?

---

Project setup is based on Vite + Typescript + ESlint + Vue 3 + Vuetify 3. You can assume the current create-vuetify template if you need more details and versions. Our project's been set up yesterday.

[x820745674]

i also want to customize the ui style through this method.
styles\settings.scss

@use 'vuetify/settings' with (
  $button-text-transform: lowercase
);

styles/main.scss

@use './setting';
@use 'vuetify';

src/main.js

import './styles/main.scss'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css'
// ... other configuration 

there is no error occurred, but also the setting doesn't work. the text in button is still upper case. don't know how to troubleshoot. can help me?