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.

Where did you install vue webpack from? Where did the theme template come from? And what editor is that you're using ? — bbsimonbb, May 04 '17 at 14:25
@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, May 04 '17 at 15:00

score 243 · Accepted Answer · edited Jan 15 '20 at 06:34

243

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.

edited Jan 15 '20 at 06:34

zmag

7,825
12
32
42

answered May 09 '17 at 05:57

gedii

2,546
1
10
8

11

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... – hmartos Jun 03 '17 at 22:58
2

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. – gedii Jun 08 '17 at 05:56
1

@Bsienn did it say what dependency? Could be a loader. – gedii Sep 20 '19 at 02:21
2

@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 Sep 20 '19 at 05:36
2

@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 Sep 20 '19 at 05:36
2

@gedii just had to say, this fix made my morning!! wanted to share the love – ToddT Jan 21 '20 at 15:14
2

@ToddT You're welcome! Now you made MY day, I'm having a pretty tough one lol – gedii Feb 03 '20 at 02:07
1

This code does not scoped the css file. It will be share/accessible by all components – Farandole Jun 17 '20 at 08:52
1

I had to change it to ... @import url("https://....css"); ... to make it works – Patrice Flao Feb 19 '21 at 23:11
1

What if you are importing Vue from a CDN? How do you do scoped styles then? – jhaubrich.com Jul 30 '21 at 02:50

score 51 · Answer 2 · answered Apr 25 '18 at 16:02

51

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>

answered Apr 25 '18 at 16:02

Sir Waithaka

888
10
10

1

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 – Shane G Jun 22 '19 at 10:45
2

The require('...') goes to your main.js file. Remember those are you 'main.css' styles. Meaning styles you would wish to be used anywhere. – Sir Waithaka Jun 24 '19 at 11:03
Thank you very much. This was the only solution that scoped actually worked. In others it was transcending the component and breaking my layout – Mithsew Jul 01 '23 at 14:42

score 12 · Answer 3 · answered Apr 06 '21 at 16:34

12

You can import CSS file on component inside script tag

<template>
</template>

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

export default {}
</script>

<style>
</style>

answered Apr 06 '21 at 16:34

Hosein

369
3
8

score 7 · Answer 4 · answered Apr 23 '21 at 11:40

7

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

answered Apr 23 '21 at 11:40

Hardik Raval

3,406
1
26
28

score 5 · Answer 5 · answered Feb 13 '20 at 12:13

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);
    }

score 3 · Answer 6 · answered Aug 04 '21 at 03:57

There are multiple ways of including a css file in your vue app. The way I prefer is to have a single css file import inside the main.js file for your vue app.

You can have multiple scss/css files which you can import in this main/styles.css file inside your asset folder. You can import fonts from CDN inside this main css file.

Another way is of course to use style tag inside your vue components

score 2 · Answer 7 · answered May 04 '17 at 13:41

2

As you can see, the import command did work but is showing errors because it tried to locate the resources in vendor.css and couldn't find them

You should also upload your project structure and ensure that there aren't any path issues. Also, you could include the css file in the index.html or the Component template and webpack loader would extract it when built

answered May 04 '17 at 13:41

iamareebjamal

321
2
13

5

I tried placing in `index.html` but it is not finding, I tried `` but is unable to find. I tried `./assets/styles/vendor.css` i am unable to get – Nitish Kumar May 04 '17 at 14:57
what they mean by webpack loader is things like `` this says that after compilation by webpack the favicon will be in the root of the output folder (usually dist" you can do simalar with css (see https://webpack.js.org/guides/asset-modules/) but i wouldn't recommend this as your hardcoding it to a template that supposed to be minimal fuctionality, use one of the other methods instead – MikeT Nov 18 '22 at 16:43

How to include css files in Vue 2

7 Answers7

Linked