Inclure sass dans gatsby globalement

Question

J'ai la structure de projet suivante :

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

et gatsby-config.js y styles.scss sont configurés respectivement de la manière suivante :

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

@import 'variables',
        'mixins';

afin d'accéder aux mixins et aux variables, la fonction styles.scss est actuellement importé dans les fichiers scss de tous les composants, par exemple :

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

Cette approche fonctionne, mais le problème est qu'au fur et à mesure que le projet se développe, les styles.scss est importé plusieurs fois et il semble qu'il y ait un problème avec cette approche. Est-il possible d'importer styles.scss une seule fois, et rendre tous les mixins et variables disponibles à travers tous les composants ?

Answer 1

Vous êtes en mesure de passer options à Sass via gatsby-plugin-sass .

Les options suivantes exposent globalement le contenu de la rubrique ./src/styles/_styles.scss à chaque fichier Sass du projet, sans qu'il soit nécessaire de l'importer explicitement.

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

---

Nota: Cela peut sembler évident pour certains, mais cela vaut la peine de le mentionner pour les futurs lecteurs.

Seulement faites-le avec des fichiers Sass qui ne contiennent que des variables, des mixins, des fonctions, etc. (des fonctionnalités Sass qui ne produisent aucun CSS réel avant d'être consommées). Sinon, vous vous retrouverez avec un CSS qui se répète plusieurs fois dans votre projet.

Exemple de dépôt

Answer 2

Fournir des variables SCSS de manière globale à vos composants

• Avec @use
• Syntaxe SCSS
• gatsby-plugin-sass
• Styles à l'échelle des composants avec les modules CSS

Configuration de gatsby-plugin-sass

gatsby-config.js fichier :

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

var sera utilisé comme espace de noms .

Fournir des variables à vos fichiers scss

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

Informations sur le trait de soulignement dans _variables.scss , partiels .

_variables.scss fichier :

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

main.jsx fichier :

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

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

export default Main

main.module.scss fichier :

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

Mais je dois exposer certains styles globaux dans gatsby-browser.js

Eh bien, vous allez avoir besoin @use ou suivre d'autres réponses qui utilisent @import en gatsby-config.js . Mélangeur @import y @use peut ne pas fonctionner à cause de :

Attention !

Les règles @use d'une feuille de style doivent venir avant toutes les règles autres que @forward, y compris les règles de style. Toutefois, vous pouvez déclarer des variables avant les règles @use pour les utiliser lors de la configuration des modules.

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

J'ai arrêté d'utiliser @import en utilisant uniquement @use .

global-styles.scss fichier :

@use "./variables" as var;

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

gatsby-browser.js fichier :

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

Answer 3

Créez un fichier nommé gatsby-browser.js dans la racine de votre répertoire. Importez le .scss une fois et il fonctionnera parfaitement.

Dans votre gatsby-browser.js

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

Answer 4

Comme Ankit Sinha l'a mentionné, vous pouvez importer vos styles dans gatsby-browser.js :

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

Cette méthode est mentionnée dans le tutoriel Gatsby .

Selon la documentation (voir Stylisation standard avec des fichiers CSS globaux ):

La meilleure façon d'ajouter des styles globaux est d'utiliser un composant de mise en page partagé.

La structure de votre projet suggère que vous utilisez une ( layout.jsx ). Si c'est le cas, vous pouvez aussi importer vos styles dans layout.jsx :

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

Answer 5

Je ne peux pas encore écrire de commentaires. Je n'ai pas la réputation nécessaire. Mais quelle réponse complète de la part de Undefined Behavior.

Juste pour commander un peu :

• Importez votre global-styles.scss en gatsby-browser.js
• Configurez quelque chose qui sera exposé à tous les fichiers scss, dans votre fichier gatsby-config.js . Il peut s'agir d'un @import ou un @use . Avec @import vous accédez directement à vos variables et mixins et avec @use vous y faites référence. Je ne sais pas vraiment quels sont les avantages des deux, mais vous pouvez utiliser n'importe lequel.