Skip to content

How to Style Using SCSS in Nuxt

🔗Introduction

SASS makes working on large projects more organized. It allows you to use variables, nested rules, mixins, and functions. The preferred styling method in Nuxt is component file styling, and integrating SASS into your project can make your component file styling appear more understandable.

🔗How to Import SASS in Nuxt

To add SASS after setting up your Nuxt application, we will first install SASS and sass-loader. Let's run either of these commands depending on our package manager.

$ yarn add sass sass-loader --dev
# or
$ npm install sass sass-loader --save-dev

🔗Component File Styling

With SASS and sass-loader installed in our project, we can now write SCSS in our component file.

Lets see an example:

<!-- src/components/button/button.vue -->
<template>
    <button
        class="app-button"
    >
      <slot></slot>
    </button>
</template>

<style lang="scss">
  .app-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-decoration: none;
    outline: none;

    // variant
    &--primary {
        background-color: #0e34cd;
        color: #ffffff;
    }
}
</style>

In the example above, all we need to specify is lang="scss" on the style tag, and we can now write scss in that component.

🔗Global File Import and Variables

To import SCSS files that are global, like variables and mixins files, we need to install style-resources:

$ yarn add @nuxtjs/style-resources --dev
# or
$ npm install @nuxtjs/style-resources --save-dev

Next, we can update our nuxt.config.js file by adding the module we just installed to the buildModules.

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
  '@nuxtjs/style-resources',
],

Next, let's create a global variables.scss file in our assets/style folder.

Add a single variable inside:

// assets/style/variables.scss

$primary: #010933;
$white: #fff;

Next, we need to import this file inside the nuxt.config file:

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

Now we have the variables in our variables.scss available in all our components for use.

Next, let's test it out by updating our button component.

<!-- src/components/button/button.vue -->
<template>
    <button
        class="app-button"
    >
      <slot></slot>
    </button>
</template>

<style lang="scss">
  .app-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-decoration: none;
    outline: none;

    // variant
    &--primary {
        background-color: $primary;
        color: $white;
    }
}
</style>

We have updated our button variant color to be our global SCSS variable ($primary and $white).

🔗Mixins

Mixins in SASS are used to write styles that can be reused in other parts of the code.

Let's create a sample mixin to center an item.

// assets/style/mixins.scss

@mixin center-item {
  text-align: center;
  align-items: center;
  justify-content: center;
}

Next, we need to import our mixin in Nuxt config:

 styleResources: {
    scss: [
      '~/assets/style/variables.scss',
      '~/assets/style/mixins.scss'
    ],
  },

Now, let's update our button component with our mixin:

<!-- src/components/button/button.vue -->
<template>
    <button
        class="app-button"
    >
      <slot></slot>
    </button>
</template>

<style lang="scss">
  .app-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: top;
    text-decoration: none;
    outline: none;
    @include center-item;

    // variant
    &--primary {
        background-color: $primary;
        color: $white;
    }
}
</style>

🔗Functions

Functions in SASS are used to write complex operations or behaviours that can be reused in other parts of the code.

Let's create a function to handle a media query for our application.

// assets/style/functions.scss

// Get the difference between 2 numbers.
@function minus($param1, $param2) {
  @return $param1 - $param2;
}

// Get the sum of 2 numbers.
@function add($param1, $param2) {
  @return $param1 + $param2;
}

This is a basic example of what a function can be used for. More complex cases, like calculating percentage, can also be done.

Let's import our mixin in Nuxt config:

 styleResources: {
    scss: [
      '~/assets/style/variables.scss',
      '~/assets/style/mixins.scss',
      '~/assets/style/functions.scss'
    ],
 },

Let's update our button component with our function:

<!-- src/components/button/button.vue -->
<template>
    <button
        class="app-button"
    >
      <slot></slot>
    </button>
</template>

<style lang="scss">
  .app-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: top;
    text-decoration: none;
    outline: none;
    @include center-item;
    width: minus(30px, 100%);

    // variant
    &--primary {
        background-color: $primary;
        color: $white;
    }
}
</style>

We have been able to add SASS to our Nuxt project, and also looked at some ways in which SASS can make our codebase look cleaner.

I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github.


This Dot Labs is a JavaScript consulting firm that enables companies to build and improve their digital technologies with confidence. For expert architectural guidance, training, consulting, engineering leadership, and development services in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, Polymer, and more, visit thisdot.co

You might also like

VueJS

Making sense of Multiple v-model Bindings in Vue 3

VueJS

Take your App to the Next Level with Vue 3

VueJS

Introducing the release of Vue 3

VueJS

How to Set Up Storybook in VueJS