How to include css files in Vue 2

vue.js, vuejs2, webpack, webpack-dev-server

Solution

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.

Problem

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.

Original source