DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Furkan Demir
Furkan Demir

Posted on • Updated on

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

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: []
  }
}
Enter fullscreen mode Exit fullscreen mode

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'
      ]
  }
}
Enter fullscreen mode Exit fullscreen mode
// assets/vars/colors.scss

$primary: #5eb8ee;
$secondary: #06af13;
Enter fullscreen mode Exit fullscreen mode
// assets/abstracts/_mixin.scss

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

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!