How to keep CSS/SCSS with Vue component file

Question

I am creating a component library where I do not want to have global CSS. Therefore, every component is scoped.

When running the production build via vue-cli-service build --target lib --name sc components/index.js, everything is compiled into sc.css and dist/css/1.392e001d.css.

If possible, I want to keep the css and/or scss combined with the vue file or js.

The reason I want to do this is to enable users of the library to import a singular component from the library. The users could then use the component anywhere without having to import/include a css file.

If this is not possible, is there a way to accomplish the desired functionality?

tony19 · Accepted Answer · 2019-12-12 08:39:45Z

3

From the Vue CLI docs for css.extract:

When building as a library, you can also set this to false to avoid your users having to import the CSS themselves.

// vue.config.js
module.exports = {
  css: {
    extract: false
  }
}

edited Dec 12, 2019 at 8:39

answered Dec 12, 2019 at 8:31

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Collectives™ on Stack Overflow

How to keep CSS/SCSS with Vue component file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related