Include sass in gatsby globally

问题

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?

回答1:

You are able to pass options to Sass via gatsby-plugin-sass.

The following options would globally expose the contents of ./src/styles/_styles.scss to each Sass file in the project, without the need to explicitly import it.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-sass',
      options: {
        data: `@import "${__dirname}/src/styles/styles";`,
      }
    },
  ],
}

---

Note: This might be obvious to some but it's worth mentioning for future readers.

Only do this with Sass files that contain just variables, mixins, functions, etc (Sass features that do not output any actual CSS unless they are used). Otherwise you will end up with CSS that is repeated multiple times across your project.

Example repo

回答2:

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'

回答3:

Create a file named gatsby-browser.js in the root of your directory. Import the .scss file once and it will work perfectly .

In your gatsby-browser.js

import "./src/styles/styles.scss"

回答4:

As Ankit Sinha mentioned, you can import your styles in gatsby-browser.js:

import './src/styles/styles.scss';

This method is mentioned in the Gatsby tutorial.

According to the docs (see Standard Styling with Global CSS Files):

The best way to add global styles is with a shared layout component.

Your project structure suggests that you are using one (layout.jsx). If that's the case, you can also import your styles in layout.jsx:

import './../styles/styles.scss';

回答5:

I cant write comments yet. I dont have the reputation. But what a complete answer from Undefined Behavior.

Just to order a little bit:

• Import your global-styles.scss in gatsby-browser.js
• Configure something that's going to be exposed to all scss files, in your gatsby-config.js. It can be an @import or an @use. With @import you access directly to your variables and mixins and with @use you reference it. I don't really know what are the benfits of both, but you could use any.

来源：https://stackoverflow.com/questions/57833884/include-sass-in-gatsby-globally