gridsome-plugin-sass-resources-loader

This module does all the hard work of configuring sass-resources-loader for your Gridsome application.

If you did not setup Sass yet, look at the official doc and setup it before using this plugin.

Install

• yarn add gridsome-plugin-sass-resources-loader
• npm install gridsome-plugin-sass-resources-loader

Usage

Basic

You can use the Gridsome aliases and modules directory(e.g node_modules) to resolve the file path.

module.exports = {
  plugins: [
    {
      use: 'gridsome-plugin-sass-resources-loader',
      options: {
        // provide path to the file with resources
        resources: '@/path/to/resources.scss',
 
        // or array of paths
        resources: ['@/path/to/first-resources.sass', '@/path/to/second-resources.scss'],
 
        // or from the npm package
        resources: ['my-package/sass/resources.scss']
      }
    }
  ]
}

TIPS

You can also use resolve from node to indicate the relative path of the file:

const resolve = require('path').resolve
...
resources: resolve(__dirname, './path/to/resources.scss')
...

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' ]