Sharing common CSS across VueJS components

Question

I'm working on the VueJS 2 project and I'm trying to clean the code but struggle with scoped styling.

Here is my requirements. :)

I have 3 components those are very similar to each others, so I decide to use mixins to merge the code into one file. Each component will use that mixins of both template and vuejs. When I want to customize the conditions of a particular component, I can simply override the code in it and it is working fine in this part.

However, one thing that I want to do more is to move the scoped style to the mixins as well. At the moment, the style is wrapped in <style lang="scss" scoped></style> tag and this style works very well on its component but I have to duplicate the styling codes into all 3 components.

I know I can add these styles to the global css file but I don't want some styles to the global scope, only one these 3 components will apply for these.

Is it any way to add these styles and apply to mixins?

What is the best practice to code this particular case?

M3RS · Accepted Answer · 2020-03-07 09:55:35Z

27

Vue makes this easy.

Solution

To use shared styles in a component you can do this.

MyComponent.js

<template>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import '@/scss/shared-styles.scss';
  @import 'styles.scss'; // this is the regular CSS used just by the component
</style>

Alternative

You can also import the shared CSS files in the component CSS file instead like below.

MyComponent.js

<template>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import 'styles.scss';
</style>

styles.scss

@import '@/scss/shared-styles.scss'

// rest of your component CSS

Automatically import global styles

If you want certain styles to be available in ALL your components you can do this.

vue.config.js

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/global.scss";
        `
      },
    },
  },
}

edited Mar 7, 2020 at 9:55

answered Mar 7, 2020 at 9:41

M3RS

7,6706 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ali Khan Over a year ago

This should be the accepted answer.. :) also is it not possible to import css files ? do i have to rename it to .scss for it to work for < style scoped > tag ?

M3RS Over a year ago

Hi - yes, this is possible. Just remove the lang="scss" attribute: <style scoped>.

Brian Over a year ago

This doesn't work for me when using a multi page application. I am using bootstrap, and it gets imported several times.

Clifton Labrum Over a year ago

Yeah, I don't think the scoped piece works right. The styles that I @import are showing up globally for me (which I don't want).

spicydog · Accepted Answer · 2019-08-17 03:38:19Z

8

I just found out the scoped style also affect on the child components as well.

Therefore, I found the solution, not sure is it the best practice but I feel very nice for it.

Create a WrapperComponent and I put the scoped style here and a small template.

<template>
    <div>
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
    /* css style that will apply to all children */
</style>

What happen here is that, when we wrap whatever components with this WrapperComponent, the template will pass on the HTML via slot without any modification and style will be able to apply from now on.

In mixins, I import this wrapper and wrap the component template with the WrapperComponent. Here is the example.

import WrapperComponent from './WrapperComponent'

let MyMixins = {

    template: `<wrapper-component>
        <div>
            Whatever HTML code here
        </div>
    </wrapper-component>`,


    components: {
        WrapperComponent,
    },
};

When we use this mixins or a child component, the style from WrapperComponent will be automatically applied and also can be used with other groups of components those want to use the same parent style.

edited Aug 17, 2019 at 3:38

answered Feb 20, 2018 at 3:24

spicydog

1,7141 gold badge17 silver badges33 bronze badges

2 Comments

Christophe Geers Over a year ago

You cannot use <slot /> as component root element because it may contain multiple nodes. Apart from that this approach does work.

Julian Over a year ago

This isn't working with scoped for me (without scoped is works, but I need scoped styles)

Stephan-v · Accepted Answer · 2018-02-15 12:04:35Z

3

Perhaps use modules instead of setting up a style section with a scoped attribute.

https://vue-loader.vuejs.org/en/features/css-modules.html

This way your CSS will still be scoped and not part of your global styling.

answered Feb 15, 2018 at 12:04

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

1 Comment

spicydog Over a year ago

CSS Modules works doesn't serve my needs. It just like to add another level of css but can be one good option to go.

Todd Hale · Accepted Answer · 2021-01-04 20:17:56Z

1

I just dropped my fadeTransition.css file into my vue app /assets folder, and import like this:

<template>
  <transition name="fade">
    <div v-if="showContent">test</div>
  </transition>
</template>
<script>
  import '@/assets/fadeTransition.css';
  // component definition
</script>

fadeTransition.css

/* fade menus in, not out */
.fade-enter-active {
  transition: opacity .5s;
}
.fade-enter {
  opacity: 0;
}

Clean and simple. Should work for scss, too.

Cheers!

answered Jan 4, 2021 at 20:17

Todd Hale

5819 silver badges16 bronze badges

Collectives™ on Stack Overflow

Sharing common CSS across VueJS components

4 Answers 4

Solution

Alternative

Automatically import global styles

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Solution

Alternative

Automatically import global styles

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related