How to include css files in Vue 2

Question

I am new to vue js and trying to find out. I installed a new new version of vue webpack on my system. I have css, js and images of this theme template that I want to include in HTML, so I tried to add it to index.html, but I can see errors in the console and assets are not added. While I was searching, I found out what I can use requirein the main.jsfile. But I get an error message:

After I tried in the file main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 require('./assets/styles/vendor.css');
 require('./assets/styles/main.css');
 require('./assets/scripts/vendor/modernizr.js');

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
  el: '#app',
   router,
  template: '<App/>',
  components: { App }
 })

While I was trying to use import to use it, but still I got an error

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 import('./assets/styles/vendor.css')
 // require('./assets/styles/vendor.css');
 // require('./assets/styles/main.css');
 // require('./assets/scripts/vendor/modernizr.js');

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
  el: '#app',
   router,
  template: '<App/>',
  components: { App }
 })

Here is a screenshot of the error:

Help me with this.

Answer 1

css App.vue .

<style>
  @import './assets/yourstyles.css'
</style>

, , , .

Answer 2

, , , vendor.css

, . , css index.html Component, webpack