CODEWITHSUNDEEP
webpackvue.jsvuejs2webpack-dev-server
Nitish Kumar
Nitish Kumar

Reputation: 6276

How to include css files in Vue 2

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: Error message

Help me out in this.

Upvotes: 126

Views: 285968

Answers (7)

APFirebolt
APFirebolt

Reputation: 53

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

Upvotes: 3

Hardik Raval
Hardik Raval

Reputation: 3651

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

Upvotes: 9

Hosein
Hosein

Reputation: 438

You can import CSS file on component inside script tag

<template>
</template>

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

export default {}
</script>

<style>
</style>

Upvotes: 15

gihandilanka
gihandilanka

Reputation: 615

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

Upvotes: 6

gedii
gedii

Reputation: 2656

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.

Upvotes: 254

Sir Waithaka
Sir Waithaka

Reputation: 908

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>

Upvotes: 52

iamareebjamal
iamareebjamal

Reputation: 321

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

Upvotes: 2

Related Questions