The vuetify documentation only provides example for injecting sass variables using vue-cli configuration in vue.config.js
https://vuetifyjs.com/en/customization/sass-variables#markup-js-vue-config-sass-variables
What is the correct way to provide the modified vuetify variables when not using the CLI?
I am upgrading an older project from v1 (stylus) to v2 (sass) and I need to override some variables, lets say I only need to change the font-family to Arial.
I am also using treeshaking with vuetify.
Now I am kind of stuck because I don't know where to import the style overrides... Importing these in src/main.ts
obviously does not work.
I have created a minimal repro here: https://github.com/Sharsie/vuetify-theme-repro/
What I have so far is a webpack config in build
directory and style overrides in src/styles/main.scss
$body-font-family: Arial;
@import "~vuetify/src/styles/styles.sass";
Running the project creates a simple page that prints out computed styles for the v-app
container
<v-app id="app">
<v-container>
<v-content>
<p>Wanted font-family: Arial</p>
<p>Current font-family: {{ fontFamily }}</p>
</v-content>
</v-container>
</v-app>