Vuetify: [Bug Report] Modifying stylus variables not working using a-la-carte

[beatgrabe]

Versions and Environment

Vuetify: 1.5.7
Vue: 2.6.6
Browsers: Chrome 72.0.3626.121
OS: Windows 10

Steps to reproduce

1. Create a fresh project by:

vue create vuetify-stylus-override
vue add vuetify

1. Setup project to use stylus like described in the docs

• Created file a src\stylus\main.styl file:

// variable to be modified:
$button-text-transform := none;

// For a-la-carte
@import '~vuetify/src/stylus/app';

• Import that file in src/main.js

…
import './stylus/main.styl'
…

• Remove previous stylus import from src\plugins\vuetify.js

Expected Behavior

Button in toolbar has a text-transform: none styling:

Actual Behavior

Button in toolbar has a text-transform: uppercase styling

Reproduction Link

https://github.com/beatgrabe/vuetify-stylus-override

[beatgrabe]

Possibly related that there are other people complaining about this in https://github.com/vuetifyjs/vuetify/issues/2730 (e.g.: https://github.com/vuetifyjs/vuetify/issues/2730#issuecomment-441165215 and https://github.com/vuetifyjs/vuetify/issues/2730#issuecomment-444950712)

[klickparkdominik]

Experiencing the same issue.

[DanielStout5]

I'm having a related issue - I'm not attempting to use stylus variables - just regular CSS overrides don't work unless I use !important because the A-la-carte component CSS is loaded before my own css.

[jacekkarczmarczyk]

Closing as we switched to Sass in Vuetify 2.0

[madebycaliper]

@jacekkarczmarczyk huge Vuetify fan and excited for 2.0! But I'm experiencing a similar issue and just spent three days debugging/setting up Stylus in Vuetify (I'm a sass guy). I hope just because the team is looking ahead to the 2.0 version you don't cutoff support entirely for 1.x.

@beatgrabe TL;DR I think you either need to import ~vuetify/src/stylus/main (ALL the styles) OR import cherry-picked components you want to override.

I believe this is caused by the fact that in the Vuetify 1.x Stylus setup, in order to override components/* variables, you must import ~vuetify/src/stylus/main and can't use a la carte (app.styl). If you use a la carte mode, you can override everything that gets import by ~vuetify/src/stylus/app but you can't affect anything that get's compiled in ~vuetify/src/stylus/components/*, which only gets imported in ~vuetify/src/stylus/main .

The workaround I discovered (that hopefully avoids creating a ton of unnecessary CSS) is the cherry-picking, like so:

// my-app/src/stylus/main.styl

$button-height = 46px;
$button-padding = 0 2em;
$button-large-height = 60px;
$button-large-padding = 0 2.5em;
$button-large-font-size = 1.1rem;

// Cherry-pick the buttons to force them to recompile with my variable overrides
@import '~vuetify/src/stylus/components/_buttons';
@import '~vuetify/src/stylus/app';

Hope this helps someone!

[beatgrabe]

@madebycaliper That makes very sense to me. Thank you for that 😃 I will try it asap.