Vuejs中如何引入外部CSS文件

Question

我用 @vue/cli 生成了一个 hello-world 项目，现在我想在 App.vue 中包含一个外部的 .css 文件。我尝试了以下代码：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
@import url("../assets/css/bootstrap.min.css");
@import url("../assets/css/panel-rescue.css");
@import url("../assets/css/animate.css");
</style>

但是当我运行 npm run serve 时，会出现以下情况：

 ERROR  Failed to compile with 3 errors                                                                                                                                                                                                            2:06:05 PM
These dependencies were not found:

* -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../assets/css/animate.css in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&
* -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../assets/css/bootstrap.min.css in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&
* -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../assets/css/panel-rescue.css in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&

To install them, you can run: npm install --save -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../assets/css/animate.css -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../assets/css/bootstrap.min.css -!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../assets/css/panel-rescue.css

我安装了css-loader npm install -D css-loader，并尝试使用webpack.config.js和vue.config.js将其设置在应用中，但是我尝试的所有方法都失败了。

我查看了vuejs和css-loader的文档，但我还是一头雾水。 编辑 已解决： @import url("../assets/css/bootstrap.min.css"); 改为 @import url("./assets/css/bootstrap.min.css");

- Mathias Osterhagen

Answer 1

我解决了这个问题： 更改为：

@import url("../assets/css/bootstrap.min.css");

to

@import url("./assets/css/bootstrap.min.css");

句子翻译：双个点“.”让我前往上一层文件夹。

- Mathias Osterhagen

---

这里有同样的问题。路径无效。谢谢！ - tedi

Answer 2

你可以尝试使用：

：

<style lang="sass">
  @import "@/path/file.css";
</style>

@ is an alias to /src

- Noone

---

奇怪。我每天都用它。但既然你解决了你的问题，这不是什么大问题。 :) - Noone

我刚刚通过以下方式让它工作起来了： <style lang="scss" src="@/assets/css/vue-multiselect.scss"></style> 谢谢！ - Mathias Osterhagen

Answer 3

请尝试这个方法。https://github.com/vuejs-templates/webpack/issues/604#issuecomment-287620657。如果不起作用，请再联系我。

<script>
import '../assets/css/bootstrap.min.css'

export default {
}
</script>

试一下这个。

- Kerim Kuşcu