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

user_3943036 0
Viewed 1001

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.

vuejs3 sass css javascript
4 Answers

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>
user_39430360
user_151511880
user_73784060

I had this same issue. After trying a bunch of "random" solutions, I noticed that when I changed my tag in App.vue, removing the "scoped" attribute, things started working. Can't explain why, but it worked for me. And if I put BACK the "scoped" attribute, the "global" scss will again not apply style to body elemnt.

user_17902030
Related