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

【问题标题】：How should i include css files in .vue files?我应该如何在 .vue 文件中包含 css 文件？
【发布时间】：2018-01-03 14:17:15
【问题描述】：

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

<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 文件？

【问题讨论】：

标签： webpack vue.js vuejs2 normalize vue-cli

【解决方案1】：

你的 style 标签没有lang 属性，这意味着当 Vue 组件被捆绑时，它会输出一个纯 CSS 文件：没有预处理。

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

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

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

<style lang="scss" scoped>

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

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

更多关于带有 CSS 的 Vue Webpack 加载器的信息可以在here找到。

【讨论】：