Включить внешний css файл в vuejs

Question

Я сгенерировал проект hello-world с помощью @ vue / cli, и теперь я хотел бы включить внешний файл. css в свое приложение. vue

Затем я попробовал это:

<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

Пожалуйста, попробуйте этот метод. https://github.com/vuejs-templates/webpack/issues/604#issuecomment -287620657 . Если это не работает

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

export default {
}
</script>

, попробуйте это.

Answer 3

Вы можете попробовать использовать:

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

@ - псевдоним /src