Sharing common CSS across VueJS components
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"; ` }, }, },}
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.