SASS resources (e.g. variables, mixins etc.) module for NuxtJs
Clone or download
Latest commit f0ec242 Sep 5, 2018
Permalink
Failed to load latest commit information.
.circleci Tests added Mar 5, 2018
.github Create issue_template.md Jan 26, 2018
test Small changes Sep 5, 2018
.gitignore Tests added Mar 5, 2018
CONTRIBUTING.md The big jump Oct 15, 2017
README.md Doc updated Mar 14, 2018
index.js Small changes Sep 5, 2018
package.json v2.0.5 Sep 5, 2018
yarn.lock Package lock updated Aug 14, 2018

README.md

nuxt-sass-resources-loader

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!

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