Webpack ile bir _global.scss dosyası nasıl yalnızca bir kez ve her bir .scss dosyasında içe aktarılmaz?

Question

Bir ..global.scss dosyasını webpack derlememle bir kez içe aktarmanın bir yolunu bulmaya çalışıyorum, her .scss dosyasına içe aktarmak yerine (her bileşen için bir scss dosyası var).

Şimdiye kadar bulduğum tek olası çözüm, bir yükleyici kullanmaktı, ancak işe yaramayacaktım. Benim webpack.config içinde

yükleyiciler şuna benzer:

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

teşekkürler!

Answer 1

Tüm scss dosyalarınızda bir @import ifadesi enjekte edecek özel bir yükleyici oluşturabilirsiniz.

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') 
     } 
    ] 
    } 
} 

Bu parçacık, bir yükleyici klasörü olduğunu varsayar ve bunun içinde, bir iğne-küresel-scss.js dosyası:

İşte bunun için bir webpack.config.js dosya.

İşte bu dosyanın içeriği var:

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

Şimdi senden src/_config klasörünün içindeki bir _global.scss dosyası var varsayıyorum. Ve dize şablon sözdizimi nedeniyle düğüm 5 + kullanıyorsunuz.