I generated a hello-world project with @vue/cli and now I would want to include an external .css file in my App.vue

Then I tried this:

<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>

But when I run npm run serve this is showing up:

 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

Then I installed css-loader npm install -D css-loader and I tried a lot of way to setup it in the app with webpack.config.js and vue.config.js, but anyway that I tried fail.

I took a look to the documentation of vuejs and css-loader I'm lost.

Edit solved:
@import url(../assets/css/bootstrap.min.css);
by
@import url(./assets/css/bootstrap.min.css);