Defining Global SCSS Variables in Nuxt.js

Hello! I assume you have problems around making SCSS file work in your Nuxt project. You're on the right page. In this post, I'm showing you how to make SCSS variables accessible globally.

Now, before we dive right into it, here's a small reminder : Nuxt is sensitive with project structure. That being said, every folder in a Nuxt project has its own role. For example, the pages directory is responsible for making the application router. Whereas the components folder saves all of the project's .vue components so that Nuxt can auto import these to your other .vue files.

Going back to our topic for today, we are going to make SCSS variable file which can be called in any file in a particular project. I'm using Visual Studio Codium for this tutorial, but you can also use other code editor that you like. You can navigate to your existing project or you can also make a new one by typing the line below into your command line.

npx create-nuxt-app nuxt-app 

Open your terminal, and install sass-loader and node-sass.

npm install --save-dev node-sass sass-loader  

This will enable you to use the scss language when styling your .vue file.

// some vue file
<style lang="scss" scoped>  
div {  
  font-size: 2em;  
  color: #ccc;  

  h1 {  
    text-decoration: underline;  
    font-weight: 100;  
  }  
}  
</style>

This works without any annoying errors

You can also make .scss file to hold all of your static variables by adding /scss folder in assets directory. Inside it, make a new .scss file and add your variables inside.

Note that you MUST name your folder scss, otherwise it won't work.

However, throughout your development process, you might find that you use some specific color codes multiple times in different .vue files. Or you might use some specific paddings or margins for containers in many other files. And if you style it in a conventional way, you might be navigating back and forth to copy and paste those numbers. Sure you may think that making a SCSS variables file and importing it into .vue files can solve this issue. But what if you have dozens of .vue files that needs those variables? Won't it be a chore to import the same SCSS file to each vue file?

To make life easier, Nuxt has a plugin called style-resources. This plugin in will auto import our scss variables into our .vue files. That way, we have more time to code for development rather than worrying about importing stuff. To use this plugin, simply open your terminal and type the line below.

npm install --save-dev @nuxtjs/style-resources  

While waiting for npm to install our plugin, open your nuxt.config.js file and add these line.

modules: [
  '@nuxtjs/style-resources'  
],

styleResources: {
  scss: ['~/assets/scss/*.scss']  
},

Now, you can make your scss variables global by adding this line in your nuxt.config.js file.

css: [
  '@/assets/scss/colors.scss',
  // you can add any scss or css files that 
  // you want to make globally accessible here  
],

If you're wondering what @ is, it indicates the root of the project.

Finally, you can access your variables or classes that you have make global. You can test it out in your .vue files.

// another vue file
<template>
  <div>Hello</div>
</template>

<style lang="scss" scoped>  
div {
  width: 100vw;
  color: $primary;
  background-color: $accent;  
}
</style>

Now you can save time importing variables and be more productive with your project :)

Note

1. Always name your scss folder as /scss, otherwise it won't work
2. After installing @nuxtjs/style-resources, add it to the modules property and add styleResources property with an scss object
3. Define all .scss files that need to be made global in the css property of nuxt.config.js