Vue模块不自动应用CSS答案

【问题标题】：Vue module not applying CSS automaticallyVue模块不自动应用CSS
【发布时间】：2019-07-21 06:20:57
【问题描述】：

我为自己制作了一个 Vue 模块并发布到 NPM，但是当我尝试通过 npm i <module-name> 将此模块安装到另一个项目时，我可以使用组件，但它没有为我的组件应用 CSS。

我认为问题在于我在组件的 style 范围 中编写所有 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>

【问题讨论】：

您的样式没有范围属性。您可能想尝试一下。
您的组件样式是否显示在 DevTools 样式列表中，但被覆盖了？
@ourmandave 没有。它没有出现
@FirstIndex 我也试过了。没用。

标签： vue.js vuejs2

【解决方案1】：

对于一个库，如果您将 CSS 包含在您的包中，对您的用户来说可能会更方便（并且更不容易出错），这样用户就不必自己导入 CSS。在 Vue CLI docs 中也建议这样做。为此，请在vue.config.js 中设置css.extract=true：

vue.config.js:

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

【讨论】：