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.

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

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

Solution 3

You can import CSS file on component inside script tag

<template>
</template>

<script>
import "@/assets/<file-name>.css";

export default {}
</script>

<style>
</style>

Solution 4

main.js

import "./assets/css/style.css"

style.css -- you can import multiple files.

@import './dev.css';
body{
    color: red
}

dev.css

body{
    font-size: 24px;
}

Solution 5

If you want to append this css file to header you can do it using mounted() function of the vue file. See the example.
Note: Assume you can access the css file as http://www.yoursite/assets/styles/vendor.css in the browser.

mounted() {
        let style = document.createElement('link');
        style.type = "text/css";
        style.rel = "stylesheet";
        style.href = '/assets/styles/vendor.css';
        document.head.appendChild(style);
    }

View more solutions

Comments

[bbsimonbb]

Where did you install vue webpack from? Where did the theme template come from? And what editor is that you're using ?

[Nitish Kumar]

@user1585345 I installed vue through vue-cli we are having a html template which have stylesheets in css files. and I'm working on WebStorm editor

[Nitish Kumar]

I tried placing in index.html but it is not finding, I tried <link rel='stylesheet' href="./src/assets/styles/vendor.css"> but is unable to find. I tried ./assets/styles/vendor.css i am unable to get

[hmartos]

This works perfectly. I had also made it work importing styles in index.js file like this: import '@/assets/css/styles.css. Production generated css file appears to be the same. I wonder what solution is better...

[gedii]

If you import the css inside a style tag in a .vue, you can make it scoped and only apply the styles in the specific component. That's one different thing you can do, but I'm also not quite sure about which solution better.

[Shane G]

where does the require('...') go? Is it in the component file or in main.js or app.vue? There is import Vue from 'vue' in main.js Thanks

[Sir Waithaka]

The require('...') goes to your main.js file. Remember those are you 'main.css' styles. Meaning styles you would wish to be used anywhere.

[gedii]

@Bsienn did it say what dependency? Could be a loader.

[Abdul Rehman]

@GeraldineGolong Hi, Thanks for reply, Sorry for not mentioning before, It was path issue, i needed to use @ sign before source and it worked. using vue-clie v3.

[Abdul Rehman]

@GeraldineGolong Hi, Thanks for reply, Sorry for not mentioning before, It was path issue, i needed to use @ sign before source and it worked. using vue-clie v3.

[ToddT]

@gedii just had to say, this fix made my morning!! wanted to share the love

[gedii]

@ToddT You're welcome! Now you made MY day, I'm having a pretty tough one lol

[Farandole]

This code does not scoped the css file. It will be share/accessible by all components

[Patrice Flao]

I had to change it to ... @import url("https://....css"); ... to make it works

[jhaubrich.com]

What if you are importing Vue from a CDN? How do you do scoped styles then?