Gatsby: [gatsby-plugin-sass] Little improvements

[rafaell-lycan]

Summary

1. Use the node-sass-chokidar lib instead node-sass to increase boost performance.
2. Add sass-resources-loader to make common resources (variables, mixins, etc) available in all Sass/Scss files in the project if you need.

Basic example

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      ...
      resources: ['./path/to/vars.scss', './path/to/mixins.scss']
    },
  },
];

Check the documentation for more examples.

Motivation

1. As a lab, I changed the package in my application during developing mode, and it decreased the RAM consumed by 15%.
2. The includePaths param doesn't work to make my variables or mixins available on my .scss files.

[m-allanson]

In Gatsby v2 (currently in beta) gatsby-plugin-sass's node-sass dependency is moved to a peer dependency. See https://next.gatsbyjs.org/packages/gatsby-plugin-sass/?=sass

This means you could swap node-sass out for node-sass-chokidar yourself. In Gatsby v1 you'd do:

npm install gatsby-plugin-sass

for the Gatsby v2 betas, it would be:

npm install gatsby-plugin-sass@next node-sass-chokidar

Have a look at the v2 migration guide if you'd like to take a look at using Gatsby v2.

You should also be able to modify Gatsby's webpack config to use sass-resources-loader, here's the Gatsby v2 webpack docs.

[rafaell-lycan]

@m-allanson I didn't know that, nice feedback btw.

The only thing that still not working it's the includePaths. Somehow It doesn't load the ../sass/base/* files.

Thanks a lot.

[chengyin]

includePaths only specify where to look for files to be imported, so you can write @include "mixins" instead of the relative path.

Using CSS Module this does create a lot of extra imports that are uncommon in SCSS world. So something like sass-resources-loader is very useful.

[sambaines]

@rafaell-lycan did you manage to get sass-resources-loader working correctly in the end?

And would this allow me to be able access variables in a sass partial, for example _variables.scss with $primary-color: red; , inside/within a sass.module.scss file? As currently Gatsby out of the box with just gatsby-plugin-sass@next installed doesn't seem to allow this or maybe the import path is wrong. Either way I couldn't get it to work.

[chengyin]

Seems like the custom webpack config merging can combine gatsby-plugin-sass and custom configs, so personally I have this gatsby-node.js file to _append_ sass-resources-loader:

exports.onCreateWebpackConfig = ({
  actions,
  stage,
  rules,
  plugins,
  loaders,
}) => {
  const sassRuleModules = {
    test: /\.module\.s(a|c)ss$/,
    use: [
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            'src/styles/_variables.scss',
            'src/styles/_mixins.scss',
            'src/styles/_typography.scss',
          ],
        },
      },
    ],
  };

  actions.setWebpackConfig({
    module: {
      rules: [sassRuleModules],
    },
  });
};

[chengyin]

Also, sambaines, if you don't mind repeating @import "variables" in your .module.scss files, includePaths works fine. In your gatsby-config.js file do something like this:

    {
      resolve: 'gatsby-plugin-sass',
      options: {
        includePaths: ['src/styles'],
      },
    },

Path is relative to the project root.

[sambaines]

Also, sambaines, if you don't mind repeating @import "variables" in your .module.scss files, includePaths works fine. In your gatsby-config.js file do something like this:

{
  resolve: 'gatsby-plugin-sass',
  options: {
    includePaths: ['src/styles'],
  },
},

Thanks @chengyin for taking the time to respond, much appreciated (I'm relatively new to gatsby and front end in general) - the includePaths option for the sass plugin seems to have done the trick and I can get gatsby to run gatsby develop and compile *.module.scss with the imported variables, but did have to then alter the @import path for the main.scss file to the styles folder but its all good learning and now I don't need to touch the webpack config!

[ixrock]

To auto-include some sass vars/mixins/etc. into your component *.scss files you simply can pass data option for node-sass with @import.
e.g: if you have common file in src/components/vars.scss, then use in your plugins declaration:

    {
      resolve: `gatsby-plugin-sass`,
      options: {
        data: '@import "vars.scss";',
        includePaths: [
          'src/components',
        ],
      },
    }

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.

[tr1s]

To auto-include some sass vars/mixins/etc. into your component *.scss files you simply can pass data option for node-sass with @import.
e.g: if you have common file in src/components/vars.scss, then use in your plugins declaration:

    {
      resolve: `gatsby-plugin-sass`,
      options: {
        data: '@import "vars.scss";',
        includePaths: [
          'src/components',
        ],
      },
    }

Thank you very much @ixrock! Data option worked great.

This just helped me solve my Gatsby issues. Now I've got mixins and variables getting injected while also live updating that can be used in Gatsby's CSS modules.

Perfect :)