Wie importiere ich eine _global.scss-Datei mit Webpack nur einmal und nicht in jeder einzelnen .scss-Datei?

Question

Versuchen, eine Möglichkeit zu finden, eine _global.scss-Datei mit meinem Webpack-Build zu importieren, anstatt es in jeder .scss-Datei zu importieren (ich habe eine scss-Datei für jede Komponente).

Die einzige mögliche Lösung, die ich bis jetzt gefunden habe, war, einen Gepäcklader zu benutzen, aber ich konnte es nicht arbeiten lassen.

Die Lader in meinem webpack.config sieht wie folgt aus:

loaders: [{ 
 
      test: /\.scss$/, 
 
      loader: "style-loader!raw-loader!sass-loader" 
 
       + "!baggage?"+ path.resolve(__dirname, "./src/_config/_global.scss") 
 
     }]

Dank!

Answer 1

Sie können einen benutzerdefinierten Loader erstellen, der eine @ import-Anweisung in alle Ihre scss-Dateien einfügt.

Hier ist eine webpack.config.js Datei für das:

var path = require('path'); 

module.exports = { 
    entry: './src/app.js', 
    output: { 
    filename: 'build/bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loader: 'style!css!sass!' + path.resolve('loaders/inject-global-scss') 
     } 
    ] 
    } 
} 

Dieser Code-Schnipsel geht davon aus, dass Sie einen Lader Ordner haben und in der es eine inject-global-scss.js Datei.

Hier ist der Inhalt dieser Datei:

module.exports = function(source) { 
    this.cacheable(); 
    return `@import './src/_config/_global'; 
    ${source}`; 
} 

Nun, ich nehme an, dass Sie eine _global.scss Datei im src/_config Ordner. Und Sie verwenden Knoten 5+ wegen der String-Vorlagensyntax.