Include sass in gatsby globally

Question

I have the following project structure:

gatsby-config.js
/src
  /components
    layout.jsx
    /button
      button.jsx
      button.scss
  /pages
  /styles
    styles.scss
    _mixins.scss
    _variables.scss

and gatsby-config.js and styles.scss are configured respectively in the following way:

...
plugins: [
...,
`gatsby-plugin-sass`
]
...

@import 'variables',
        'mixins';

in order to access the mixins and variables, the styles.scss is being currently imported in all the components' scss files, e.g.:

//button.scss
@import './../styles/styles.scss'

This approach is working, but the problem is, as the project grows, the styles.scss is being imported multiple times and seems to be something wrong with this approach. Is it possible to import styles.scss only once, and make all mixins and variables available across all the components?

Answer 1

Providing SCSS variables globally to your components

• With @use
• SCSS syntax
• gatsby-plugin-sass
• Component-Scoped Styles with CSS Modules

gatsby-plugin-sass config

gatsby-config.js file:

{
  resolve: `gatsby-plugin-sass`,
  options: {
    implementation: require("sass"),
    data: `@use "${__dirname}/src/global-styles/variables" as var;`
  }
},

var will be used as namespace.

Providing variables to your scss files

./src/global-styles/_variables.scss
./src/components/main.jsx
./src/components/main.module.scss

Info about the underscore in _variables.scss, partials.

_variables.scss file:

$color-1: red;
$color-2: blue;

main.jsx file:

import React from 'react'
import style from './main.module.scss'

const Main = () => (
    <div className={style.main}>Content</div>
)

export default Main

main.module.scss file:

.main {
    color: var.$color-1;
}

But I need expose some global styles in gatsby-browser.js

Well, your are going to need @use, or follow other answers that use @import in gatsby-config.js. Mixing @import and @use may not work because of:

Heads up!

A stylesheet’s @use rules must come before any rules other than @forward, including style rules. However, you can declare variables before @use rules to use when configuring modules.

https://sass-lang.com/documentation/at-rules/use

I stopped using @import, only using @use.

global-styles.scss file:

@use "./variables" as var;

body {
    color: var.$color-2;
}

gatsby-browser.js file:

import './src/global-styles/global-styles.scss'