CODEWITHSUNDEEP
vue.jsvuejs2
konuralpt
konuralpt

Reputation: 271

Vue module not applying CSS automatically

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>

Upvotes: 1

Views: 79

Answers (1)

tony19
tony19

Reputation: 138196

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
  }
}

Upvotes: 1

Related Questions