我应该如何在.vue文件中包含css文件？

Question

我正在使用官方的vue-cli脚手架并尝试以这种方式在App.vue中包含normalize.css

<style scoped>
  @import "/node_modules/normalize.css/normalize.css";
  .app {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    max-width: 1000px;
    margin: auto;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
</style>

但是在编译css之后，它不包含在样式标记中或作为外部文件：

那么，我怎样才能正确地包含这个或另一个css文件？

Answer 1

您的样式标记没有lang属性，这意味着当捆绑Vue组件时，它将输出一个纯CSS文件：无需预处理。

发生这种情况时，它会移动您的导入语句并将其转换为plain CSS import。

要修复代码，您需要将导入URL更改为Web服务器可访问的相对路径。在您的情况下，路径/node_modules未安装在Web服务器上，因此无法解析该文件。将normalize放在页面上的不同样式标记中可能更容易（and better practice）（使用HTTP2这不会成为瓶颈），或使用预处理器并导入规范化到同一个最终版本中输出为CSS。

如果你想使用SASS / SCSS作为预处理器（你的语法已经是有效的SCSS），那么你想要定义你的样式：

<style lang="scss" scoped>

Webpack vue-loader将支持多种语言，但您还需要为预处理器添加正确的Webpack加载程序：

npm i --save-dev node-sass sass-loader

有关使用CSS的Vue Webpack加载器的更多信息，请参见here