How to use style-resources-module in Nuxt.JS?

Furkan Demir — Wed, 10 Mar 2021 05:20:15 +0000

I'm sure that every front-end developer is tired of importing SCSS, Less or Stylus variables, mixins and functions everywhere. If you're using Nuxt.JS, there is an easy solution for that. By using style-resources-module you can use your variables everywhere. You don't need to write @import every component. It's very easy to do that, just stick with me!

Installation

If you haven't installed your CSS preprocessor, add your CSS preprocessor dependencies:

SASS: yarn add sass-loader node-sass
LESS: yarn add less-loader less
Stylus: yarn add stylus-loader stylus

Add the style-resources-module package:
yarn add @nuxtjs/style-resources

Add @nuxtjs/style-resources package as a build module to your project:

export default {
  buildModules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   // your settings here
   sass: [],
   scss: [],
   less: [],
   stylus: []
  }
}

Usage

I will be giving an example with SCSS. But you are free to use other processor like Less, Sass or Stylus. You have to add your mixins or abstracts to your nuxt.config.js file like the following example.

// nuxt.config.js

export default {
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/vars/*.scss',
      './assets/abstracts/_mixin.scss'
      ]
  }
}

// assets/vars/colors.scss

$primary: #5eb8ee;
$secondary: #06af13;

// assets/abstracts/_mixin.scss

@mixin bp($point) {
  @if $point == mobile {
    @media (max-width: 576px) {
      @content;
    }
  }
}

After completing, you can use your mixins and variables in any component.

components/Box.vue

<template>
 <div class="box"></div>
</template>

<style lang="scss" scoped>
.box {
 color: $secondary;
 @include bp(mobile) {
  background: $primary;
 }
}
</style>

Note: Do not import actual styles. Use this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower. Do not do this!

Github: style-resources-module

That's it. Thanks for reading.

DEV Community: Furkan Demir

How to use style-resources-module in Nuxt.JS?

Installation

Usage