Applying SCSS style to body element in global SCSS file using Vue 3

Question

I want to style my body element using SCSS in a global SCSS file I have created. Specifically, I want to remove margin and padding from the body element, set font and smooth-scrolling.

My current structure: I have a main.scss file that imports all other .scss files I need (global, colors, mixins, ...). This main.scss file is loaded by exporting this in the vue.config.js file:

css: {
    loaderOptions: {
        sass: {
            additionalData: `
                @import "@/assets/scss/main.scss";
            `
        },
    },
}

This is my global.scss file:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;1,300&display=swap');


// This doesn't get applied...
body {
    height: 100vh;
    min-height: 100%;
    width: 100%;

    margin: 0px !important;
    padding: 0px !important;

    scroll-behavior: smooth;

    font-family: 'Roboto', sans-serif;
}

I'm using these packages for compiling and loading SCSS:

"sass": "^1.27.0",
"sass-loader": "^10.0.3"

I used almost the same structure and code in a different Vue 2 project and it worked. Did Vue 3 change something?

Is the styling inside my global.scss file only applied inside the Vue app container?

I know a workaround is adding a style tag in my .html file and putting this CSS code inside there, but I want to use SCSS.

Answer 1

A working solution is to import the global.scss file in the App.vue component (the main component). Make sure that the style tag isn't scoped.

So put this inside your App.vue:

<style lang="scss">
    @import "@/assets/scss/global.scss";
</style>

Answer 2

I had the same problem with a small project. I am new to Vue and Sass, so I don't know the differences between Vue 2 and Vue 3, but for me this source was very helpful: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling

Instead of the reset.css file you can import your global.scss (or main.scss?) to the src/main.js file. It will work the same way.