How to require a css file in Vue plugin

Question

I am using Vue Design System in order reuse components and styles in multiple Vue applications.

I'm trying to include a global CSS file in the DS export, but I can not get this to show in the app. Any tips ?

So far i have tried this which does not seem to load the required file.

// Install the above defined components
const System = {
  install(Vue) {
    require("./styles/global.scss") 

    components.forEach(component => Vue.component(component.name, component))
  },
}
export default System

which will be used as :

import DesignSystem from "@/system"
Vue.use(DesignSystem)

I can not find any guidelines in the Vue docs about loading CSS with a plugin.

Alex Brohshtut · Accepted Answer · 2020-04-02 17:04:18Z

3

Since Vue plugin is essentially set of components, you can bundle it's CSS like you would do with any other component. Just add it to root of your plugin component:

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

answered Apr 2, 2020 at 17:04

Alex Brohshtut

2,06013 silver badges15 bronze badges

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

2 Comments

Marine Le Borgne Over a year ago

Oh, that makes sense. But what do you mean by "root of my plugin component" ? I only have a number of small atomic presentational components, there is no root one.

Alex Brohshtut Over a year ago

You can import css everywhere if you are not sure about usage, webpack will make sure that it is loaded only once

Collectives™ on Stack Overflow

How to require a css file in Vue plugin

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related