Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[gatsby-plugin-sass] Little improvements #6655

Closed
rafaell-lycan opened this issue Jul 22, 2018 · 10 comments

Comments

Projects
None yet
5 participants
@rafaell-lycan
Copy link

commented Jul 22, 2018

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

This comment has been minimized.

Copy link
Member

commented Jul 24, 2018

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

This comment has been minimized.

Copy link
Author

commented Jul 27, 2018

@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

This comment has been minimized.

Copy link

commented Aug 5, 2018

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

This comment has been minimized.

Copy link

commented Aug 6, 2018

@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

This comment has been minimized.

Copy link

commented Aug 6, 2018

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

This comment has been minimized.

Copy link

commented Aug 6, 2018

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

This comment has been minimized.

Copy link

commented Aug 6, 2018

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

This comment has been minimized.

Copy link

commented Sep 19, 2018

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 gatsbot bot added the stale? label Jan 6, 2019

@gatsbot

This comment has been minimized.

Copy link

commented Jan 6, 2019

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

This comment has been minimized.

Copy link

commented Jan 18, 2019

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

@gatsbot gatsbot bot closed this Jan 18, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.