vuetify: [Bug Report] Importing stylus file causes some classes to cascade incorrectly

Versions and Environment

Vuetify: 1.0.8 Vue: 2.5.16 Browsers: Chrome 65.0.3325.162 OS: Windows 7

Steps to reproduce

Import main stylus file in main App.vue with:

<style lang="stylus">
@import '~vuetify/src/stylus/main'
</style>

Build the Data Iterator example.

Expected Behavior

The classes from components/_grid.styl should take precedence.

Actual Behavior

The align-end class is being overwritten by other classes from v-list components.

Reproduction Link

https://codepen.io/pen/?&editors=101

Other comments

The only workaround I have found is to add:

@import '~vuetify/src/stylus/main'
@import '~vuetify/src/stylus/components/_grid'

But this may have unintended side effects…

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 12
Comments: 22 (8 by maintainers)

Most upvoted comments

Apparently this line also messes up my style: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/components/_selection-controls.styl#L34

So it looks like this, see how checkbox is positioned: https://codepen.io/anon/pen/dQdJWR

Again, import 'vuetify/dist/vuetify.min.css' apparently works properly but
@require '~vuetify/src/stylus/main.styl' messes it up

Temp fix:

.v-select-list .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
  margin-bottom: 0
}

Traxo7 on Nov 21, 2018

As this issue is focused on v1.x of the framework, this issue is no longer actionable. We have made huge strides to alleviate these issues in v2 and while some issues do still exist, we are actively working to resolve them.

johnleider on Sep 15, 2019

I created a git repo as I could not get codesandbox to work:

https://github.com/aaronrosenthal/webpack4-vue-vuetify

Running this you will notice that class="align-end" does not work properly when importing Vuetify stylus files. If you uncomment the code in src\styles\main.styl then the example will work.

aaronrosenthal on Mar 22, 2018