Bundle styles in Vue Plugin without Component

Question

My Question

Before reading further, by 'without component', I mean that my plugin does not require a component as there is no template, it is simply a custom Vue Directive that serves as a wrapper to a class. However, that does not mean that I am not willing to use a component in order to include the necessary styles if this cannot be avoided...

Consider the following plugin (proposed file structure):

src
│   index.js
│   SomeClass.js    
│
└───sass // (not sure about this)
    │   core.scss

index.js installs the Vue plugin and defines a custom directive that calls certain methods on the SomeClass class
SomeClass.js provides all required functionality
sass/core.scss provides any necessary styles required for the plugin

My question, quite simply, is how do I include the core.scss file when the Vue plugin is installed? Or, what would be a better file structure, thus way to include the styles required for the plugin?

Ideally, I would like to avoid using a template as there is no HTML inserted, my plugin simply adds styles to already defined elements in the DOM.

Ben Carey · Accepted Answer · 2019-06-04 11:09:28Z

2

For anyone stumbling upon this, the solution was extremely easy... I simply placed the following at the top of my index.js:

import './sass/_core.scss';

I wasn't aware that you could import CSS/SASS files directly into Javascript files...

answered Jun 4, 2019 at 11:09

Ben Carey

17k20 gold badges95 silver badges181 bronze badges

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

Collectives™ on Stack Overflow

Bundle styles in Vue Plugin without Component

My Question

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My Question

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related