How to use global SASS variables in my Nuxt 3 components

Using global SASS variables in Nuxt 3 can enhance project maintainability and consistency, especially when handling styles and themes. To implement global SASS variables in Nuxt 3 components, follow these steps:

Step 1: Install and configure SASS-related dependencies

First, ensure that sass and sass-loader are installed in your project. If not installed, use npm or yarn to install these dependencies:

bash
npm install --save-dev sass sass-loader@10 fibers
# or
yarn add --dev sass sass-loader@10 fibers

Here, sass-loader@10 is used because certain Webpack versions may not be compatible with the latest sass-loader.

Step 2: Set up the global style file

Next, create a global SASS file to define your variables. For example, create assets/styles/variables.scss:

scss
// assets/styles/variables.scss
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

Step 3: Import the global style file in Nuxt configuration

In nuxt.config.js, configure the css option to include the global style file. This ensures your variables are accessible across all components:

javascript
// nuxt.config.js
export default {
  css: [
    '@/assets/styles/variables.scss'
  ],
  build: {
    loaders: {
      scss: {
        additionalData: `@import "@/assets/styles/variables.scss";`
      }
    }
  }
}

Here, the additionalData option automatically imports your variable file at the start of each SASS file, eliminating the need for manual imports in component styles.

Step 4: Use global SASS variables in components

Now, apply the defined variables within any component's <style> tag:

vue
<template>
  <div class="example">Hello, Nuxt 3!</div>
</template>

<style lang="scss">
.example {
  color: $primary-color;
  font-family: $font-stack;
}
</style>

By following these steps, you can efficiently use global SASS variables in your Nuxt 3 project, streamlining style management.

Summary

Using global SASS variables improves code reusability and maintains style consistency, which is crucial for large projects. Implementing these steps in Nuxt 3 ensures both development efficiency and long-term maintainability.