SASS resources (e.g. variables, mixins etc.) module for NuxtJs

Downloads in past


18632.0.56 years ago7 years agoMinified + gzip package size for nuxt-sass-resources-loader in KB


npm CircleCI npm donate
This module does all the hard work of configuring sass-resources-loader for your nuxt application.
sass-resources-loader @import your SASS resources into every required SASS module. So you can use your shared variables & mixins across all SASS styles without manually importing them in each file. Made to work with CSS Modules!


npm i nuxt-sass-resources-loader
# or
yarn add nuxt-sass-resources-loader

Note that installing as a dev dependency --save-dev or -D will not work correctly.


You can use the nuxtjs aliases to resolve the file path.
module.exports = {
  modules: [
    // provide path to the file with resources
    ['nuxt-sass-resources-loader', '@/path/to/resources.scss'],

    // or array of paths
    ['nuxt-sass-resources-loader', [

    // or the native options
    ['nuxt-sass-resources-loader', {
        resources: '@/path/to/resources.sass'
    // or from the npm package
    ['nuxt-sass-resources-loader', 'my-package/sass/resources.scss']

with sass resources option. require v1.1+

// nuxt.config.js
module.exports = {
  modules: [
  sassResources: [

You can also use resolve from node to indicate the relative path of the file:
const resolve = require('path').resolve
['nuxt-sass-resources-loader', resolve(__dirname, './path/to/resources.scss')]

Glob pattern matching

You can specify glob patterns to match your all of your files in the same directory.
// Specify a single path
resources: './path/to/resources/**/*.scss', // will match all files in folder and subdirectories
// or an array of paths
resources: [ './path/to/resources/**/*.scss', './path/to/another/**/*.scss' ]

Note that sass-resources-loader will resolve your files in order. If you want your variables to be accessed across all of your mixins you should specify them in first place.

resources: [ './path/to/variables/vars.scss', './path/to/mixins/**/*.scss' ]

For more details see the official documentation