Closed Pernick closed 4 years ago
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
.
@Pernick Did you try https://github.com/nuxt-community/vuetify-module#defaultassets font
option ?
I'll take a look when I've some time
@kevinmarrec Yes I have. Setting the
font: {
family: 'Montserrat'
},
in default assets doesn't seem to be doing the job either unfortunatelly.
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 :/
@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.
I faced the same problem,finally solve this with by doing these:
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
}
},
@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).
@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
@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.
Okay, I've found the reason. Upgrading sass-loader
solved the issue. Thanks everyone for their inputs and time.
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",
...
}
}
Okay, I've found the reason. Upgrading
sass-loader
solved the issue. Thanks everyone for their inputs and time.
@Pernick you save my day 👍
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 ;)
Yea, it only works with sass-loader@^8.0.2 (not v9 or v10) :(
dont forget treeShake: true,
vuetify: {
customVariables: ["~/assets/variables.scss"],
treeShake: true,
}
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';
For me declaring treeShake
and customVariables
directly in the nuxt.config.js
instead of the optionsPath
file (can still declare colors there tho) worked..
@dawidstefaniak Tnx
it work sass-loader@8
just
Is there a way to override primary color using scss variables?
Is there a way to override primary color using scss variables?
@QuipHop You can just set it in the vuetify.options.js
file
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']
}
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?
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";
Module version v1.9.0
Describe the bug Variables defined in
variables.scss
are not overriding vuetify variablesTo Reproduce https://github.com/Pernick/custom-variables-test
Steps to reproduce the behavior:
npm install
npm run dev
$body-font-family
variable inassets/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.