How to include css files in Vue 2

Question

I'm new to vue js and trying to learn this. I installed a fresh new version of vue webpack in my system. I'm having a css, js and images of this a theme template which I want to include into the HTML so i tried adding it in index.html but I can see errors in console and the assets are not being added. While I searched I came to know that I can use require in main.js file. But I'm getting the error:

Following I've tried in my main.js file:

// 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 tried using import to use it but still I got 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 the error screenshot:

Help me out in this.

Answer 1

You can import the css file on App.vue, inside the style tag.

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

Also, make sure you have the right loaders installed, if you need any.

Answer 2

Try using the @ symbol before the url string. Import your css in the following manner:

import Vue from 'vue'  require('@/assets/styles/main.css') 

In your App.vue file you can do this to import a css file in the style tag

<template>   <div>   </div> </template>  <style scoped src="@/assets/styles/mystyles.css"> </style>