Include vue-material.css in the scoped-css

[titouancreach]

In single file component (SFC) this is possible to have scoped css, css that work only for the component and it's child. In my case, I want to do a component that use vue-material but I don't want the rest of my website to be affected. I tried something like:

<template>
  <div>
    My Root Component which use vue-material
  </div>
</template>

<script>

import ...;

Vue.use(VueMaterial);

export default {
};

</script>


<style lang="scss" scoped>
    @import '~vue-material/dist/vue-material';
</style>

Unfortunatelly, the css is not applied on the root component. Note I use WebpackExtractText to put the css in its own file. (Otherwise, I have perf issues)

I also tried to

import 'style-loader!vue-material/dist/vue-material.css';

Directly in the component

Is there a workaround to use the css in a local component without affect all the website ?

[mak-pun]

Yes . I would like to know too. Sadly vue-material doesn't have a vue-material.scss file other wise in a scss file you can do:

.some-wrapper{
  @import '~vue-material/dist/vue-material.scss'
} 

[zapping]

@titouancreach can you check these issues if they work as you require #11 and #899

[titouancreach]

@mak-pun Wow, didn't think of that. It works perfectly. Thanks. I post here my wrapper for future Googler.

<template>
  <div class="vue-material-wrapper">
    <slot></slot>
  </div>
</template>

<script>

export default {
}

</script>

<style lang="scss">
.vue-material-wrapper {
  @import '~vue-material/dist/vue-material';
}
</style>

Just wrap your root component:

<VueMaterialWrapper> 
  <MyRootComponentThatUseVueMaterial /> 
</VueMaterialWrapper>

Just be sure your webpack loader (or other) are set up to load scss (or other css that support nested) and be sure your bundler is smart enought to not include the same css multiple time if you use the wrapper in multiple place.

Thanks again

[turbobuilt]

This no longer works in beta 1.0

[igorbuts]

@turbobuilt +1 I have "vue-material": "^1.0.0-beta-11" this is no working anymore. The styles are applied to all application content

@titouancreach let's reopen this one

[shanecp]

The way to work around this is to create a new CSS with a root class, and copy the compiled CSS into that file. Perhaps allowing the developer to set an optional root class is an option?

[RobertJGabriel]

Would really love to hear if anyone got this working