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.

Under the hood, the new variables will be hoisted to the top of the compiled styles and used to override the default behavior.

Single-file components

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.

Edit this page on Github | Translate on Crowdin
StoreFor Enterprise