Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best way to have global css in Vuejs

Tags:

import

css

vue.js

What is the best way to have a global css file in Vuejs for all components? (Default css like bg color, button styling, etc)

  • import a css file in the index.html
  • do @import in main component
  • put all the css in the main component (but that would be a huge file)
like image 396
Jordy Avatar asked Sep 11 '16 16:09

Jordy


People also ask

Where do I put global CSS in Vue?

To add global CSS in Vue. js, we can import our global CSS file in main. js . import "./assets/css/main.

How do I add CSS to Vue?

In Vue. js, we can add an inline style to our element by binding the style attribute in the HTML tag. For reference, :style is shorthand for v-bind:style . Inline styling can be done in two ways: using object syntax or array syntax.

Do you need CSS with Vue?

Before we move on to add more advanced features to our app, we should add some basic CSS to make it look better. Vue has three common approaches to styling apps: External CSS files.


1 Answers

Import css in your index.html, but if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css.

As comments below suggested if using webpack adding this to main.js works:

import './assets/css/main.css'; 
like image 116
highFlyingSmurfs Avatar answered Oct 05 '22 02:10

highFlyingSmurfs