Vuetify uses SASS/SCSS to craft the style and appearance of all aspects of the framework. Utilizing the sass/scss data option of your
vue.config.js file, you can optionally pass in custom variables to overwrite the global defaults. A list of available variables is located within each component's API section and in the Variable API of this page. This functionality is automatically handled by vue-cli-plugin-vuetify.
If you have not installed Vuetify, check out the quick-start guide. Once installed, create a folder called
styles in your src directory with a file named
variables.sass. The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults.
When you run yarn serve, the vuetify-cli-plugin will automatically hoist the global Vuetify variables to all of your sass/scss files. When making changes to individual component variables, you will still need to manually include its variables file. You can find an example of a custom variables file below.
Coming soon. If you are interested in collaborating on this section, please reach out to johnleider in the community.
This section assumes you have already followed our Webpack guide on the Quick start page. The option can vary depending upon the version of sass-loader you are use using. Ensure that you use the proper syntax when setting up the SASS/SCSS data options as they have different line endings. You can find more information about prependData on sass-loader's Github page.
Below is an example of what a variable file looks like:
There are two ways to import and use Vuetify variables within your components, both which provide the same outcome. The first method is to import the default framework styles file:
This is the preferred method if you are using Presets or not using a variables file at all.
The second method is to import your project's specific variables file. This is recommended if you are using your own variables file to import the global Vuetify styles.
Keep in mind, it does not matter which syntax you use, SASS or SCSS, when importing and using variable files.
When using sass variables, there are a few considerations to be aware of.
When using variable files, ensure that you only define or import other variables. The bootstrapped files will be added to every component and will cause duplicate CSS in your app. Below is an example of what NOT to do.
When using variables, the initial compilation of your application will increase. This is due to the fact that styles are updated in real time whenever you make a modification to a hoisted variable file. This is only experienced with the initial compilation step and can be improved by changing where you import Vuetify from. Keep in mind this will not work if your application is affected by any of the Vuetify loader limitations; your application will still work, but not receive the performance increase.
Ready for more? Continue reading with: