Webpackを使用して_global.scssファイルを1回だけインポートする方法。すべての.scssファイルには1回しかインポートできません。

Question

私のwebpackビルドで_.global.scssファイルをインポートする方法を見つけようとしましたが、各.scssファイルにインポートするのではなく（各コンポーネントにscssファイルがあります）。

私が今までに見つけた唯一の解決策は、手荷物預かり機を使用することでしたが、動作させることができませんでした。私webpack.configで

ローダーは次のようになります。

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

ありがとう！

Answer 1

すべてのscssファイルに@importステートメントを挿入するカスタムローダーを作成できます。

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

このコードを使用すると、ローダーのフォルダを持っていることを前提とし、それの内部に、注入先グローバル-scss.jsファイル：

はここで、そのためにwebpack.config.jsファイルです。

は、ここでは、このファイルの内容です：

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

を今、私はあなたがSRC/_configフォルダ内_global.scssファイルを持っていると仮定しています。 文字列のテンプレート構文のため、ノード5+を使用しています。