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) :(

[copy-ninja1]

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

[alisalemmi]

I had same Problem. just adding treeShake: true to vuetify config in nuxt.config.js solved my problem.

this is my nuxt.config.js:

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

[augnustin]

Same here, treeShake did the trick.

But what I don't understand is why is customVariables: ['~/assets/variables.scss'] set in the default app template, while treeShake: true ain't.

Any idea? Shouldn't this be added?

[wesley3295]

Still having problems with this, there are no errors to display either.

// nuxt.config.js

import { defineNuxtConfig } from "@nuxt/bridge"

export default defineNuxtConfig({
...
css: ["~/assets/styles/main.scss"],
vuetify: {
    customVariables: ["~/assets/styles/variables.scss"],
    treeShake: true,
    defaultsAssets: false,
    theme: {
      options: {
        customProperties: true,
      },
      dark: false,
      themes: {
        dark: {
          primary: "#2F71C0",
          accent: "#FD4C4B",
          secondary: "#4D4D4D",
          info: "#0a78d0",
          anchor: "#0a78d0",
          warning: "#FB8C00",
          error: "#BD3736",
          success: "#1A891F",
        },
        light: {
          primary: "#0C436F",
          accent: "#937431",
          secondary: "#4D4D4D",
          info: "#0a78d0",
          warning: "#FB8C00",
          error: "#BD3736",
          success: "#1A891F",
          anchor: "#0a78d0",
        },
      },
    },
  },
build: {
    transpile: ["vuetify/lib", /@koumoul/, "lodash-es"],// necessary for "à la carte" import of vuetify components
    loaders: {
      scss: {
        prependData: '@import "~/assets/styles/variables.scss',
      }, 
    },
  },
})

//package.json
{
  "name": "project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "node --max-old-space-size=12000 node_modules/nuxi/bin/nuxi.mjs build",
    "start": "nuxi preview",
    "test": "vitest",
    "test-ui": "vitest --ui",
    "coverage": "vitest run --coverage",
    "deploy": "nuxi build"
  },
  "dependencies": {
    "@koumoul/vjsf": "^2.10.3",
    "@nuxtjs/auth-next": "5.0.0-1617968180.f699074",
    "@nuxtjs/axios": "^5.13.1",
    "@vueuse/core": "^7.5.4",
    "core-js": "^3.11.1",
    "dotenv": "^16.0.0",
    "jsonwebtoken": "^8.5.1",
    "ldap-authentication": "^2.2.7",
    "lodash-es": "^4.17.21",
    "marklogic": "^2.6.0",
    "multer": "^1.4.3",
    "nanoid": "^3.3.1",
    "nuxt-edge": "latest",
    "parse-duration": "^1.0.0",
    "typescript": "^4.5.5",
    "vue-toastification": "1.7.11",
    "vuedraggable": "^2.24.3",
    "zingchart": "^2.9.7",
    "zingchart-vue": "^2.0.3"
  },
  "devDependencies": {
    "@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27498038.f18e68b",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/vuetify": "^1.12.1",
    "@vitest/ui": "^0.10.0",
    "@vue/test-utils": "^1.2.1",
    "@vueuse/nuxt": "^7.6.1",
    "babel-core": "7.0.0-bridge.0",
    "c8": "^7.11.0",
    "deepmerge": "^4.2.2",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2",
    "sass": "^1.47.0",
    "sass-loader": "^10.3.1",
    "std-env": "^3.0.1",
    "supertest": "^6.2.2",
    "vitest": "^0.10.0",
    "webpack": "^4.46.0"
  }
}

// ~/assets/styles/variables.scss

$body-font-family: roboto, sans-serif !default;
$font-size-root: 16px !default;
$line-height-root: 1.5 !default;
$border-radius-root: 4px !default;
$font-color-root: red;

$heading-font-family: $body-font-family !default;
$headings: () !default;
$headings: map-deep-merge(
  (
    "h1": (
      "size": 6rem,
      "weight": 300,
      "line-height": 6rem,
      "letter-spacing": -0.015625em,
      "font-family": $heading-font-family,
      "text-transform": false,
      "color": red,
    ),
    "h2": (
      "size": 3.75rem,
      "weight": 300,
      "line-height": 3.75rem,
      "letter-spacing": -0.0083333333em,
      "font-family": $heading-font-family,
      "text-transform": false,
    ),
    "h3": (
      "size": 3rem,
      "weight": 400,
      "line-height": 3.125rem,
      "letter-spacing": normal,
      "font-family": $heading-font-family,
      "text-transform": false,
    ),
    "h4": (
      "size": 2.125rem,
      "weight": 400,
      "line-height": 2.5rem,
      "letter-spacing": 0.0073529412em,
      "font-family": $heading-font-family,
      "text-transform": false,
    ),
    "h5": (
      "size": 1.5rem,
      "weight": 400,
      "line-height": 2rem,
      "letter-spacing": normal,
      "font-family": $heading-font-family,
      "text-transform": false,
    ),
    "h6": (
      "size": 1.25rem,
      "weight": 500,
      "line-height": 2rem,
      "letter-spacing": 0.0125em,
      "font-family": $heading-font-family,
      "text-transform": false,
    ),
    "subtitle-1": (
      "size": 1rem,
      "weight": normal,
      "line-height": 1.75rem,
      "letter-spacing": 0.009375em,
      "font-family": $body-font-family,
      "text-transform": false,
    ),
    "subtitle-2": (
      "size": 0.875rem,
      "weight": 500,
      "line-height": 1.375rem,
      "letter-spacing": 0.0071428571em,
      "font-family": $body-font-family,
      "text-transform": false,
    ),
    "body-1": (
      "size": 1rem,
      "weight": 400,
      "line-height": 1.5rem,
      "letter-spacing": 0.03125em,
      "font-family": $body-font-family,
      "text-transform": false,
    ),
    "body-2": (
      "size": 0.875rem,
      "weight": 400,
      "line-height": 1.25rem,
      "letter-spacing": 0.0178571429em,
      "font-family": $body-font-family,
      "text-transform": false,
    ),
    "button": (
      "size": 0.875rem,
      "weight": 500,
      "line-height": 2.25rem,
      "letter-spacing": 0.0892857143em,
      "font-family": $body-font-family,
      "text-transform": uppercase,
    ),
    "caption": (
      "size": 0.75rem,
      "weight": 400,
      "line-height": 1.25rem,
      "letter-spacing": 0.0333333333em,
      "font-family": $body-font-family,
      "text-transform": false,
    ),
    "overline": (
      "size": 0.75rem,
      "weight": 500,
      "line-height": 2rem,
      "letter-spacing": 0.1666666667em,
      "font-family": $body-font-family,
      "text-transform": uppercase,
    ),
  ),
  $headings
);

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

// vue-toastification styling
$vt-color-default: var(--v-primary-base);
$vt-text-color-default: #fff;
$vt-color-info: var(--v-info-base);
$vt-text-color-info: #fff;
$vt-color-success: var(--v-success-base);
$vt-text-color-success: #fff;
$vt-color-warning: var(--v-warning-base);
$vt-text-color-warning: #fff;
$vt-color-error: var(--v-error-base);
$vt-text-color-error: #fff;

// Import the regular Vue Toastification stylesheets (or create your own)
@import "vue-toastification/src/scss/_variables";
@import "vue-toastification/src/scss/_toastContainer";
@import "vue-toastification/src/scss/_toast";
@import "vue-toastification/src/scss/_closeButton";
@import "vue-toastification/src/scss/_progressBar";
@import "vue-toastification/src/scss/_icon";
@import "vue-toastification/src/scss/animations/_bounce";