Starting with version 2.0, Vuetify is built using SASS/SCSS. Using the data option in your
vue.config.js, we can also pass in custom variables. A list of available variables is located in each components' folder. In order to build the SASS file, you will need to configure your application to support SASS and Fibers.
In the command line, run:
This will setup the dependencies needed to import and parse SASS/SCSS files. Once installed, create a folder called
sass in your src directory (or appropriate assets directory) with a file named
main.scss. Keep in mind many of the Vuetify variables are using SASS Lists and must be updated with map-merge as demonstrated below:
Now setup your vue.config.js file to load the file through the data option of the sass loader:
The next time you run yarn run serve, Vue CLI 3 will inject the variables file and your changes will be represented in your application.
If you are requiring the Vuetify stylesheet by a
<link> tag in your index file, remove it.
Under the hood, the new variables will be hoisted to the top of the compiled styles and used to override the default behavior.
Using the above configuration you will also be able to access Vuetify variables in SFC files when using style blocks with
lang="sass". However if you wish to use
lang="scss", an extra step is necessary.
When Vue CLI 3 compiles styles, by default it does not differentiate between file types for SASS, (.scss and .sass). Due to this, and the above configuration, when adding custom styles in a SFC with
lang="scss", it will throw an error saying that a semi-colon must be added to the import statement. However if you add this semi-colon to the existing configuration, it will tell you to remove it. This is due to the fact that Vuetify uses both .scss and .sass files internally.
In order to solve this, we have to tell webpack to explicitly use an import statement that includes the semi-colon when encountering scss code.