How do I add a global scss file in Vue.JS that will compile?

Asked 12/1, 2019 at 9:19 Answered 17/2, 2022 at 9:8

I am trying to import a scss file within my VueJS project, where it will then compile and thus be able to use with my project. However, I need some help, as at present it simply errors. Is there a way to do this? Please note, I am very new to VueJS so I'm just getting my head around the basics.

I created a folder called scss within my src folder, which contains my main.scss file. Next in my Vue.JS I have the following code;

<template>
  <div id="app">
    <Home></Home>
    <Primary></Primary>
    <Secondary></Secondary>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'

export default {
  name: 'app',
  components: {
    'Home': Home,
    'Primary': Primary,
    'Secondary': Secondary
  }
}

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/main.scss";
        `
      }
    }
  }
};

</script>

<style lang="scss">
#app {
    display:block;
}
</style>

Brave answered 12/1, 2019 at 9:19 Comment(0)

To simplify things, just utilize this handy trick.

Create a file called vue.config.js. If it wasn't auto-created by vue-cli during project creation, you can manually create it.
Please add the following code to the file you have created.

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

The "@" symbol represents the "src" directory. This means that "@/assets" is equivalent to "src/assets".
I assume that you have a main.scss file that includes all of your sub-SCSS files. For more information on how it's made, check here. Working with it is really cool.
prependData may not work or throw an error because of "sass-loader": "^8.0.2". Here is some useful information:

on "sass-loader": "^7.*.*" try to use data

on "sass-loader": "^8.0.2" try to use prependData

on "sass-loader": "^9.0.0" try to use additionalData

After making changes in vue.config.js, stop the server and reload it.
If you are using vuetify, ensure that the processor name matches the extension. For example, if you have .scss files, use these configurations.

scss: { // the change was made here (match the option name with file extension)
  additionalData: `
    @import "@/assets/scss/main.scss";
  `
}

if you are using .sass file use these configs

sass: { //the change was made here (match the option name with file extension)
  additionalData: `
    @import "@/assets/scss/main.sass";
  `
}

So answered 24/5, 2020 at 14:4 Comment(7)

Hello! I am following the same way of including styles globally but for some reasons using a variable in a component gives me an error of Invalid CSS. Also setting styles in the global style file doesn't affect my component either. Struggle to understand why. – Telluric 20/6, 2020 at 6:58

make sure that that your style tag has lang attribute in your Vue component so it must look like <style lang="scss"> if you are using scss – So 21/6, 2020 at 14:59

Yes, it have this attribute. When I remove it and use just css, it is fine. But as soon as I add lang and use scss, it sends an error... :( – Telluric 22/6, 2020 at 9:55

check in your package.json to see if you have installed sass-loder and node-sass – So 22/6, 2020 at 22:33

I tried this and the problem is that this main.scss file gets prepended to every vue component's styles. So if I have 2 vue components, the main.scss rules end up being twice in the DOM (in <style>). Do you have a solution for this? – Cathrin 11/4, 2021 at 8:10

@DanMacák what about additionalData – So 11/4, 2021 at 8:29

I don't have that option to my disposal (sass-loader 8.0.2), only those These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }. Looking at the documentation, maybe sassOptions.includePaths might do. – Cathrin 11/4, 2021 at 8:56

UPDATE FOR SASS-LOADER ^9.0.0

I am using below Vue.config.js file configuration with sass-loader 9.0.2. And all is working fine.

NOTE: additionalData is used instead of data or prependData on the latest versions of SASS-LOADER.

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
            @import "@/styles/main.scss";
            `
            }
        }
    }
};

Rufescent answered 12/7, 2020 at 13:10 Comment(2)

It did not work out of the box...of course if I think about it...I had to restart with npm serve on IntelliJ. And, of course, adjust the @import path. Sometimes one stumbles over the smallest stones... – Hermie 28/5, 2022 at 20:10

If you are using .scss files use scss loaderOption instead of sass. Otherwise you may get an SassError: semicolons aren't allowed in the indented syntax – Inwards 30/5, 2022 at 13:6

I updated the style tag to include the import statement and it works:

<style lang="scss">

@import "scss/main.scss";

#app {
    display:block;
}
</style>

Brave answered 12/1, 2019 at 9:54 Comment(1)

Thanks, this worked. Instead, I have put it in a separate css file. – Slush 19/2, 2021 at 7:10

It depends on what you used for creating a Vue project but when you're using the Vue CLI 3 tool you can set this up in your vue.config.js file located in your root. This file is for config of your Vue project and is used a lot to overwrite your webpack config (that isn't there unless you eject).

npm install -D sass-loader node-sass

After that, you can add this to your vue.config.js file

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "./src/main.scss";
                `,
            },
        },
    },
}

And then you can import all your scss files in your main.scss. This way you can also use variables in your components. Personally I would not recommend to have separate stylesheets. If your project scales you will probably delete components and then end up with styles you don't use anymore. If you write your scss in the components itself you will also delete styles when you delete your component. I would go for only some global styles in a separate file and a file for your variables. Hope this helps.

Suspensive answered 12/1, 2019 at 14:23 Comment(1)

You approach make sense and I think it is a better process of working than what I have now, However, editing the vue.config,js file and using the import method with the correct file path doesn't render any styles. Therefore, like you say, it must be to do with what CLI I am using I guess. – Brave 12/1, 2019 at 14:40

Update For SASS-LOADER ^11.0.1

For vue.config.js and if you're using node-sass, you need to add the following config:

module.exports = {
  ...

  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/assets/styles/file.scss";',
        implementation: require('node-sass')
      },
    },
  },

  ...
};

Sainthood answered 3/3, 2021 at 19:44 Comment(0)

The recommended solution is okay, but has some issues regarding the css file being called twice through the vue.config.js.

The best method is to call your mixins or variables in the vue.config.js

scss: { // the change was made here (match the option name with file extension)
  additionalData: `
    @import "@/scss/variables.scss";
  `
}

Then inside your main.ts or app.vue file import the scss file.

import '@/main.scss';

Obduliaobdurate answered 17/2, 2022 at 9:8 Comment(0)

There is some solutions to this situation.

import your global css to index.html.
import your css file to current component.
assume you are using server side rendering with nuxt then you can put your css on nuxt.config.js file.
you can use webpack

Clevey answered 13/1, 2019 at 4:19 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

UPDATE FOR SASS-LOADER ^9.0.0

Recommended topics

Hot tags