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

vue.config.js：

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

Vue模块未自动应用CSS

1 个答案: