⚠️ We are closing the support for this package and transferred to the official community package. So we strongly suggest that you use the official community package @nuxtjs/style-resources.

Specially thanks our contributors submitting bug reports, feature requests and commenting on issues

Migration guide

// nuxt-sass-resorces-loader
export default {
  modules: [
    'nuxt-sass-resources-loader'
  ],
  // your settings here
  sassResources: [
    '@/path/to/first-resources.sass'
  ]
}

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

  styleResources: {
   // your settings here
   scss: ['@/path/to/first-resources.sass'],
   less: [],
   stylus: []
  }
}

nuxt-sass-resources-loader

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!

Install

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.

Usage

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', [
        '@/path/to/first-resources.sass',
        '@/path/to/second-resources.scss',
    ]],

    // 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: [
    'nuxt-sass-resources-loader'
  ],
  sassResources: [
    '@/path/to/first-resources.sass'
  ]
}

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

License

MIT