creating my ownl cscc variables.

[leostereo]

Hi guys , im playing around with quasar.variables.scss and app.scss files.
First question:
Is it ok to create variables on any of those files ?
Where should I create my own styles ?
I created a $jprimary1 variable on quasar.variables.scss and $jprimary2 on app.scss.
My $jprimary1 works in a style block code like

<style lang="scss">
.test{
  color: $jprimary,
}
</style>

but $jprimary2 does not , it yelds:
SassError: Undefined variable.
Weird message since im using scss.

Other:
I can use $primary variable in color component properties like:

<q-checkbox size="xs" keep-color v-model="remember" label="Remember this email?" color="primary"/>
but , can not use my recently created $jprimary variable.
How can I use my own variables inside components properties ?

Any help is preciated,
Leandro.

[hawkeye64]

Quasar sass variables are automatically imported for you. Similar to components. If the importing code "sees" it's in use, then it'll automatically imported it into the file. For your own variables file, you will have to manually import it yourself to avoid the error.

[leostereo]

Thanks !! can you point an example ?? could not find any.
Leo.

[hawkeye64]

@leostereo

@import '../css/my-vars.sass'

https://github.com/quasarframework/quasar-ui-qcalendar/blob/next/docs/src/css/app.sass#L2-L5

[rstoenescu]

1. You can override Quasar variables AND/OR declare your own vars in quasar.variables.scss
2. There is no reason why your second variable ($jprimary2) is not accessible in your <style lang="scss">. You're doing something wrong but can't tell what with the amount of info that you've provided.
3. If you want to use color props in Quasar with your custom color, then: https://next.quasar.dev/style/color-palette#adding-your-own-colors (the link is Quasar v2, but works the same in v1 as well). Declare that in your app.scss (or equivalent).

[leostereo]

Thank you guys ... it is working now ...
Quasar is amazing.

[dimitrije-cvetkovic]

Hello guys, I would like to use some scss file directly in a component, but without a need to use scss @import statement. Let's say I am using app.scss. I have added this file to the css part of the quasar.conf.js - 'app.scss'. If I try to use a variable from app.scss in some component, a get a scss error that variable is not defined. I patched it with the @import, but guessing there is something I could do? I do not want to import app.scss to every component. I thought that is why we use css part in quasar.conf.js? I have inspected quasar and css part is registered:

I have read the documentation and did not found a thing about this. @rstoenescu from your comment added 2 weeks ago, I still do not understand what is css part of quasar.conf.js for?

[rstoenescu]

It's a convenience feature to add additional css files into your app.

[dimitrije-cvetkovic]

Here is what I did:

1. created app.scss file in /src/css
   
   
2. added this file to the quasar.conf.js
   
3. used a variable from app.scss inside some component:
   
   I have expected this to be working (app.scss to be globally included just as quasar.variables.scss is), but for some reason it is not working. I could add @import to the component or to the quasar.variables.scss, and it will work that way even without adding file to the css part of quasar.conf.js. Am I missing something to be able to use this variable?
   This file is being added to the client-entry.js file:
   
   Do I need to configure something else here also?

[rstoenescu]

@dimitrije-cvetkovic Add all sass variables (even non-Quasar ones) to quasar.variables.sass