CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Al-76
Al-76

Reputation: 1878

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

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>

Upvotes: 20

Views: 27788

Answers (7)

Clarance Liberiste Ntwari
Clarance Liberiste Ntwari

Reputation: 4067

To simplify things, just utilize this handy trick.

  1. Create a file called vue.config.js. If it wasn't auto-created by vue-cli during project creation, you can manually create it.
  2. Please add the following code to the file you have created.
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/assets/scss/main.scss";
        `
      }
    }
  }
};
  1. The "@" symbol represents the "src" directory. This means that "@/assets" is equivalent to "src/assets".
  2. 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.
  3. 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
  1. After making changes in vue.config.js, stop the server and reload it.
  2. 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";
  `
}

Upvotes: 34

Sukh_Bains
Sukh_Bains

Reputation: 116

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';

Upvotes: 1

Al-76
Al-76

Reputation: 1878

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

<style lang="scss">

@import "scss/main.scss";

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

Upvotes: 6

myusuf
myusuf

Reputation: 12260

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')
      },
    },
  },

  ...
};

Upvotes: 2

user12094942
user12094942

Reputation:

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";
            `
            }
        }
    }
};

Upvotes: 14

Hoang Subin
Hoang Subin

Reputation: 7460

There is some solutions to this situation.

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

Upvotes: 0

Giesburts
Giesburts

Reputation: 7668

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.

Upvotes: 2

Related Questions