Comment utiliser le chemin absolu pour importer des scss personnalisés, lors de l'utilisation de react + webpack?

Question

Dans un fichier scss, j'essaie d'importer un morceau de scss personnalisé et largement utilisé (dans une pile React/SASS/Webpack).

Pour que je puisse utiliser un mixin partagé.

Supposons que je crée un MyAdminButton et que je souhaite importer un fichier scss qui concerne tous les boutons du projet. (C'est un scss personnalisé, pas un fournisseur/externe).

Cela ressemblerait à ceci:

//this actually works but it is a code smell : what if the current file moves ?
@import "../../stylesheets/_common-btn-styles.scss";

.my-admin-btn {
    // here I can use a shared mixin defined in _common-btn-styles.scss
}

Cela ne semble pas bon car si mon fichier scss bouge, alors tout est cassé.

Merci de votre aide

Answer 1

A trouvé. En fait, vous pouvez configurer sass-loader dans webpack.config.json, comme décrit ici: https://github.com/jtangelder/sass-loader

Voici la partie pertinente:

sassLoader: {
   includePaths: [path.resolve(__dirname, "./some-folder")]
}