CODEWITHSUNDEEP
cssvue.jsvuejs2
Onyx
Onyx

Reputation: 5772

Not entirely sure where am I supposed to write my CSS in a Vue SPA

Up until now, I've always used a single CSS file when creating multiple page applications which would store all my CSS rules.

Now that I'm using Vue.js and components, I am not sure where to write my CSS.

I could write the CSS in the <style></style> tags of a component but to me this only makes sense if the CSS is only used for this specific component. This leaves me wondering where should I write CSS which I would like to be applied globally to everything.

Imagine I have some CSS which I want to be applied to everything like this snippet:

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}

Where would I write it?

Upvotes: 1

Views: 440

Answers (2)

TheRawPerformer
TheRawPerformer

Reputation: 196

Until a better solution I can offer two suggestions:

1. In App.vue file

If it's just a small amount of code, put it in your App.vue file

As you said:

"I could write the CSS in the tags of a component but to me this only makes sense if the CSS is only used for this specific component."

If you put CSS in the in the <style></style>in any .vue files that's part of your project it's going to be global.

<style></style> get's applied to the whole project unless you add scoped to the tag.

<style scoped>
    body {
        background: green; /* This won't effected your main <body> tag unless you actually have a `<body>` inside the `<template>` of that file */
    }
</style>

2. Import a separate file containing only CSS (updated and easier)

From @Fabjan in the comments.
Just import the .css file in your main.js file:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/lib/css/reset.css' // my own reset file
import './assets/lib/css/myMain.css' // global stylesheet

Make sure to put it before your run your app. new Vue({})

(3. My previous answer:)

You can create a styles.vue and add all your global styles there inside <styles></styles> without scoped. (this worked for me)

Then inside your main.js file you write:

import GlobalStyles from "./assets/lib/css/styles.vue"

Vue.use(GlobalStyles)

Make sure your styles.vue contains at least on tag inside for it to import properly.

<template>
    <div class="empty">

    </div>
</template>

<style>
    body {
        background: red;
        /* The rest of your Global CSS code */
}
</style>

This feels really tacky but it worked for me now.

Hope it helps and I'd love some feedback or comments if people have better solutions.

Upvotes: 1

Hoang Subin
Hoang Subin

Reputation: 7410

Here is my solution to configure global scss with my project that using Nuxt.

  1. Assume that you already have node sass and sass-loader installed.

  2. In nuxt.config.js file add your SCSS path from static or assets folder

    css: [ '@/assets/scss/main.scss' ]

Bonus: if you don't like this way maybe you can get a try nuxt-sass-resources-loader

Upvotes: 0

Related Questions