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
– bbsimonbb, Commented May 4, 2017 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
– Nitish Kumar, Commented May 4, 2017 at 15:00

zmag · Accepted Answer · 2020-01-15 06:34:58Z

254

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, 2020 at 6:34

zmag

8,27112 gold badges39 silver badges47 bronze badges

answered May 9, 2017 at 5:57

gedii

2,6561 gold badge13 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

hmartos Over a year ago

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 Over a year ago

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.

Abdul Rehman Over a year ago

@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 Over a year ago

@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 Over a year ago

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

|

Sir Waithaka · Accepted Answer · 2018-04-25 16:02:46Z

52

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, 2018 at 16:02

Sir Waithaka

90810 silver badges10 bronze badges

3 Comments

ofey Over a year ago

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 Over a year ago

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

pxeba Over a year ago

Thank you very much. This was the only solution that scoped actually worked. In others it was transcending the component and breaking my layout

Hosein · Accepted Answer · 2021-04-06 16:34:22Z

15

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 6, 2021 at 16:34

Hosein

4364 silver badges10 bronze badges

Comments

Hardik Raval · Accepted Answer · 2021-04-23 11:40:45Z

9

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, 2021 at 11:40

Hardik Raval

3,6911 gold badge29 silver badges31 bronze badges

Comments

gihandilanka · Accepted Answer · 2020-02-13 12:13:00Z

6

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

answered Feb 13, 2020 at 12:13

gihandilanka

6157 silver badges15 bronze badges

Comments

APFirebolt · Accepted Answer · 2021-08-04 03:57:41Z

3

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

answered Aug 4, 2021 at 3:57

APFirebolt

531 silver badge8 bronze badges

Comments

iamareebjamal · Accepted Answer · 2017-05-04 13:41:39Z

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 4, 2017 at 13:41

iamareebjamal

3212 silver badges13 bronze badges

2 Comments

Nitish Kumar Over a year ago

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

MikeT Over a year ago

what they mean by webpack loader is things like <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> 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 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

Collectives™ on Stack Overflow

How to include css files in Vue 2

7 Answers 7

10 Comments

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

10 Comments

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related