Модуль Vue не применяет CSS автоматически

Question

Я сделал модуль Vue для себя и опубликовал в NPM, но когда я пытаюсь установить этот модуль в другой проект через npm i <module-name>, я могу использовать компонент, но он не применяет CSS для моего компонента.

Я думаю, проблема в том, что я пишу все CSS в стиле в своем компоненте.Я не знаю, как лучше всего использовать CSS.Мой стиль такой простой, как этот:

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

Answer 1

Для библиотеки может оказаться более удобным (и менее подверженным ошибкам) ​​вашим пользователям, если вы включите CSS в свой пакет, поэтому пользователям не придется импортировать CSS самостоятельно.Это также рекомендуется в Vue CLI docs .Для этого установите css.extract=true в vue.config.js:

vue.config.js:

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