Vue module not applying CSS automatically

Question

I made a Vue module for myself and published to NPM, but when I try to install this module to another project via npm i <module-name>, I can use component, but it's not applying CSS for my component.

I think the problem is I am writing all CSS in style scope in my component. I don't know what the best practice is for including CSS. My style is so simple like this:

<style>
.container {
  border: 1px solid #E5E5E5;
  position: relative;
}
.image-container {
    height: 70%;
    width: 100%;
    text-align: center;
    margin-top: 7%;
}
.title-container {
  width: 100%;
  text-align: center; /* optional */
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  position: absolute;
  bottom: 0;

}
</style>

Your style is not having the scope attribute. You might want to try that. — FirstIndex
– FirstIndex, Commented Feb 27, 2019 at 14:02
Do your component styles show up in DevTools Styles list, but are overridden? — ourmandave
– ourmandave, Commented Feb 27, 2019 at 14:12

tony19 · Accepted Answer · 2019-02-28 11:32:17Z

1

For a library, it might be more convenient (and less error-prone) for your users if you include the CSS in your bundle, so users wouldn't have to import the CSS themselves. This is also recommended in the Vue CLI docs. To do this, set css.extract=true in vue.config.js:

vue.config.js:

module.exports = {
  //...
  css: {
    extract: true
  }
}

edited Feb 28, 2019 at 11:32

answered Feb 28, 2019 at 11:18

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Collectives™ on Stack Overflow

Vue module not applying CSS automatically

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