在 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");

Answer 1

我解决了： 改变了

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

到

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

双重.将我带到上面的一个文件夹。

Answer 2

你可以尝试使用：

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

@ 是/src 的别名

Answer 3

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

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

export default {
}
</script>

试试这个。