[Feature Request] How i can use my own SASS file globally?

[approached]

Problem to solve

I can't use my own sass file. I can only to override css class or set variables. But no posible to use a own main.sass file.

Loading file: lib/presets/default/index.js
Doc: https://vuetifyjs.com/en/customization/presets ... import '../../styles/main.sass'

Proposed solution

Load sass template via option.

[ottz0]

I used @import in my App.vue file with style tags and it compiles and reloads

[approached]

@ottz0 how it will work? can you please send a example.After you load vuetify intitally than the main.sass will also load. You have no choice!

[ottz0]

Put it in your App.vue file and import it

<style lang="scss">
    @import 'src/scss/main';
</style>

[approached]

What you are describe, it's extend the main file and not a full placement!
BTW: I use a https://vuetifyjs.com/en/getting-started/quick-start#webpack-install .

[KaelWD]

Please explain what you're actually trying to do.

[approached]

The File import '../../styles/main.sass' generates follow css code:

.v-application code {
    background-color: #f5f5f5;
    color: #bd4147;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

But i want use my own css style for the code tag and not overwrite this!

[uifox]

Hey @KaelWD,
I'm having the same issue. The main.sass file adds lots of rules to the default style of the framework. Many of these rules aren't needed in my app and it is very important for me to keep the CSS bundle size small because my app must perform well and needs great ranking in google searches. (The Core Web Vitals performance analysis is sensitive to unused bytes from CSS files.)

main.sass is always loaded by the default preset even if I want a different set of rules. E.g. I may not need any elevations and transitions in my app, therefor I'd like to exclude them, but I can't because they are included by default.

It is always possible to use a webpack plugin to remove unused styles (e.g. css-byebye), but I'd rather prefer including only those that I really need.

To solve my problem I forked vuetify and removed the main.sass import from the default preset, and indeed this works OK, but it would be better if I could take full control of what CSS rules are included without a fork. Note that this was possible in vuetify v1 (see install notes: @import '~vuetify/src/stylus/main') and I was able to create a custom main.styl in my app dropping unneeded style rules ending up with a css bundle size ~100KiB. With vuetify v2 it is ~300KiB even if treeshaking is on and I have a limited way to affect it (via sass variables, e.g. $color-pack: false).

Any suggestion for fixing this problem? Will the framework be more configurable in v3?

We would love to continue using vuetify because it's a firm foundation, but performance and customizability are paramount in our apps, hence we would greatly appreciate efforts to improve these.

Thanks a lot.

[KaelWD]

I was able to create a custom main.styl

You can probably do something similar in v2 by removing the main.sass import with IgnorePlugin and recreating it yourself with only the desired styles.

Will the framework be more configurable in v3

Global styles are no longer included by default, you have to import vuetify/styles if you want them. The webpack and vite plugins also have a styles: false option which removes component stylesheets too. We've also added sass variables to disable just the css reset or utility classes if you still want everything else.