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文档也建议这样做。为此，在vue.config.js中设置css.extract=true：

vue.config.js：

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