Wie verwende ich den absoluten Pfad, um benutzerdefinierte scss zu importieren, wenn reactive + webpack verwendet wird?

Question

In einer scss-Datei versuche ich, benutzerdefinierte, weit verbreitete Brocken von scss (in einem React/SASS/Webpack-Stack) zu importieren.

So dass ich eine gemeinsame Mixin verwenden kann.

Angenommen, ich erstelle einen MyAdminButton und ich möchte scss-Datei importieren, die alle Schaltflächen des Projekts betrifft. (Es ist benutzerdefinierte scss, nicht Anbieter/externe).

Es würde wie folgt aussehen:

//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 
} 

Dies, da, wenn meine SCSS Datei bewegen nicht gut klingt, dann ist alles kaputt ist.

Vielen Dank für Ihre Hilfe

Answer 1

Gefunden. Eigentlich kann man sass-loader in webpack.config.json konfigurieren, wie hier beschrieben: https://github.com/jtangelder/sass-loader

Hier ist der relevante Teil:

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