You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.scssreplacing 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:
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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: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:
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 erroeousmain.scss
, lads... What do I do with that one? But I guess I'll just press on. So I create thesettings.scss
, make the neccesary modification invite.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 instructedmain.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
:settings.scss
: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.Beta Was this translation helpful? Give feedback.
All reactions