[gatsby-plugin-sass] Little improvements

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.

[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',
        ],
      },
    }

[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],
    },
  });
};