Vuetify: Issue with stylus block level import

[ghost]

Because Vuetify is using some generic classes like btn or title is it very hard to use it in an existing environment. However, stylus has the option to block-level imports, that could be very handy to isolate classes into the vue App scope to not collide with existing ones.

Import vuetify/src/stylus/app into a css selector doesn't work as expected

Steps to reproduce

compile with webpack

Versions

0.15 à la carte

What is expected ?

To compile the whole css into a parent selector

What is actually happening ?

without block-level import it works as expected.

<style lang="stylus">
    @require '~../node_modules/vuetify/src/stylus/app'
</style>

with block-level, got a compilation error

<style lang="stylus">
    #app
      @require '~../node_modules/vuetify/src/stylus/app'
</style>

` ERROR Failed to compile with 1 errors 16:14:33

error in ./src/App.vue

Module build failed: Error: /Users/xxxx/Workspace/webpack/src/App.vue:18:11
14|
15| #app
16| @require '~../node_modules/vuetify/src/stylus/app'
17|

Failed to @extend "code"

at /Users/xxxx/Workspace/webpack/node_modules/stylus/lib/visitor/normalizer.js:406:17
at Array.forEach (<anonymous>)
at Normalizer.extend (/Users/xxxx/Workspace/webpack/node_modules/stylus/lib/visitor/normalizer.js:402:17)
...`

[Zeph33]

Hi
I use vuetify class for use Vuetify in my app
<div class='vuetify'> VApp .... </div>
This i my stylus file :
vuetify.txt

Before use this file, edit
node_modules\vuetify\src\stylus\elements\_code.styl line 18 and add .vuetify
@extend .vuetify code
node_modules\vuetify\src\stylus\components\_carousel.styl line 39 and add .vuetify
@extend .vuetify .carousel__left

Stylus file define color without vuetify class for direct use in my app

[johnleider]

I am unable to reproduce this issue. Can you provide a set of reproduction steps/minimal reproduction in a repo or something please.

[Zeph33]

you can not wrap all styles in a class or id

.myclass
    @import '../node_modules/vuetify/src/stylus/main'

or

#myid
    @import '../node_modules/vuetify/src/stylus/main'

Stylus don't compile, the error is due to @extend in elements\_code.styl and components\_carousel.styl

For compile change @extend ... by @extend .myclass ... or @extend #myid ...

   &__right
     @extend .myclass .carousel__left

The idea is to to use Vuetify in a project without interference with the style of this one

[Zeph33]

Stylus documentation : Stylus supports block-level import

[lkmadushan]

I'm getting following error for the latest version of Vuetify.

@Zeph33 @johnleider Any idea for how to fix that?

[johnleider]

@lkmadushan Please do not comment on closed issues. If you have a bug, please create a new issue, https://issues.vuetifyjs.com or seek help in our community, https://community.vuetifyjs.com