Vuetify-module: CustomVariables not overriding Vuetify variables

[Pernick]

Module version
v1.9.0

Describe the bug
Variables defined in variables.scss are not overriding vuetify variables

To Reproduce
https://github.com/Pernick/custom-variables-test

Steps to reproduce the behavior:

1. Clone the repository
2. npm install
3. npm run dev
4. Try to change the $body-font-family variable in assets/variables.scss

Expected behavior
Font changing based on the variable

Additional context
This was working before the update - I think the version was ~1.5.0.
Manually setting font-family css on the element works fine.

[enzonotario]

For me, it works in this way:

$body-font-family: 'Work Sans', sans-serif;
@import '~vuetify/src/styles/main.sass';

But I don't really know if it is good to import main.sass. But works!

EDIT: Sorry, that doesn't work when you do npm run build.

[kevinmarrec]

@Pernick Did you try https://github.com/nuxt-community/vuetify-module#defaultassets font option ?
I'll take a look when I've some time

[Pernick]

@kevinmarrec Yes I have. Setting the

font: {
    family: 'Montserrat' 
},

in default assets doesn't seem to be doing the job either unfortunatelly.

[thebspin]

For me it does work using:

vuetify: {
    customVariables: ["~/styles/variables.scss"],
    treeShake: true,
    options: {
          customProperties: true
     }
}

I can change the font-size or font family, are you sure the font is actually loaded in?
I do have an issue however that i can't seem to be changing a few variables like the background color... it won't override that for me :/

[Pernick]

@thebspin Yes, you can see in the issue - changing the font-family style property manually on the element works fine. You can see the options in the repo I provided.

[mimbo119]

I faced the same problem,finally solve this with by doing these:

• installed "nuxt-webfontlodaer" learning from Developmint/nuxt-webfontloader using npm i nuxt-webfontloader
• then added the module in nuxt.config.js
  webfontloader: {
custom: {
families: [
'Raleway:400,900',
'Lato:400,700,900'
],
urls: [
'https://fonts.googleapis.com/css?family=Raleway:400,900&display=swap',
'https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap'
]
}
},

-then added the font in the vuetify module:
vuetify: {
defaultAssets: {
font: {
family: 'Lato'
},
icons: 'mdi'
},
treeShake: true,
options: {
customProperties: true
}
},

[Pernick]

@mimbo119 Thanks for your input. Unfortunately this does not solve the issue for me. I updated the test repo with this change (https://github.com/Pernick/custom-variables-test). I was using webfontloader from the beginning, although I used it with

webfontloader: {
    google: { ... }
}

options instead of custom. Trying the custom fonts is not working either. (I removed all the caches, too).

[kevinmarrec]

@Pernick
See https://github.com/nuxt-community/vuetify-module/releases/tag/v2.0.0-alpha.0

Using :

vuetify: {
    defaultAssets: {
      font: {
        family: 'Montserrat',
        size: 20
      }
    }
  }

It just works for me, using nuxt-webfontloader, both with nuxt dev & nuxt build + nuxt start.

See https://github.com/nuxt-community/vuetify-module/tree/next/test/fixture

[Pernick]

@kevinmarrec
I am starting to suspect, the issue lays somewhere else. Because even this is not working for me. I updated the test repo - it is pretty bare bones, so I don't see what could be the issue there.

Setting defaultAssets is not working. Customizing customVariables file is not working.

[Pernick]

Okay, I've found the reason. Upgrading sass-loader solved the issue. Thanks everyone for their inputs and time.

[zacharytyhacz]

I'm still having this issue with nuxt 2.11.0 - I would go with the font loader module, by would I have to do that if I import in the css and declare the font family? What I'm doing SHOULD work and there shouldn't be a whole package imported just to get this one font to work.

My project already has a ton of imports lol.

// nuxt.config.js
buildModules: [
    ...
    '@nuxtjs/vuetify',
    ...
],

modules: [
    ...
    '@nuxtjs/style-resources',
    ...
],
vuetify: {
    treeShake: true,
    defaultAssets : {
        font: {
            family: "Montserrat",
        },
        icons: "mdi",
    },
    customVariables: ['~/assets/scss/variables.scss'],
},

/* file: ~/assets/scss/variables.scss */

/* Ref: https://github.com/nuxt-community/vuetify-module#customvariables */

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');

$body-font-family: 'Montserrat', sans-serif !important;
$heading-font-family: 'Montserrat', sans-serif !important;

@import '~vuetify/src/styles/styles.sass';

Then in the inspector, there's no styling at all for applying the font family.

// package.json
{
  "dependencies": {
    "@nuxtjs/style-resources": "^1.0.0",
    ...
    "node-sass": "^4.13.1",
    "sass-loader": "^7.1.0"
    ...
  },
  "devDependencies": {
    ...
    "@nuxtjs/vuetify": "^1.0.0",
    ...
  }
}

[armadillo-dev]

Okay, I've found the reason. Upgrading sass-loader solved the issue. Thanks everyone for their inputs and time.

@Pernick you save my day 👍

[dawidstefaniak]

Hi Guys,

If you are using nuxt, you need to install those packages:

npm install sass sass-loader@8 fibers deepmerge -D

Running this command will make everything work ;)

[tomexx]

Yea, it only works with sass-loader@^8.0.2 (not v9 or v10) :(

[emmajnr1000]

dont forget treeShake: true,

vuetify: {
    customVariables: ["~/assets/variables.scss"],
    treeShake: true,
    }

[azollai]

Related to: Storybook Vuetify Vuetify Custom Variables

I believe that Storybook has a bug, importing incorrectly the variables.scss file and apply it to Vuetify.
And the bug is based on that: Vuetify is loaded earlier than the custom variables.scss file...
So it's actually imported correctly, but the variables won't be overwritten.

https://github.com/nuxt-community/vuetify-module/issues/191#issuecomment-542404033 mentions a work around which actually works for me.
At the end of the variables.scss file, add
@import '~vuetify/src/styles/main.sass';
But it makes the normal app to be loading the main.sass file like 100 times.... so it's not really a good workaround. So you can rather just create another sb-variables.scss file, where you can import these two files in the right order!!, like:

@import "@/styles/variables.scss";
@import '~vuetify/src/styles/main.sass';

Also, this is only enough for global variables. If you want to use the styles of Vuetify components, sadly you have to import them after one by one:
@import '~vuetify/src/components/VInput/VInput.sass';

[bhaskar-nair2]

For me declaring treeShake and customVariables directly in the nuxt.config.js instead of the optionsPath file (can still declare colors there tho) worked..

[mansorygit]

@dawidstefaniak Tnx
it work sass-loader@8 just

[QuipHop]

Is there a way to override primary color using scss variables?

[bhaskar-nair2]

Is there a way to override primary color using scss variables?

@QuipHop You can just set it in the vuetify.options.js file

[larsvdd]

Finally, thank guys, got it working.
Expect for one thing: the $heading-font-family