ホワイトラベルsass/css with Webpack

Question

私は白いラベル付きアプリケーションのwebpackで複数のCSSファイルを生成しようとしています。

それぞれの「ブランド」に対してwebpack css/sassローダーを1回実行して別のファイルに出力したいとします。私はブランドごとに別々の変数ファイルを持っており、各ブランドのCSSファイルをコンパイルすることを望んでいるので、これを実行したいと思います。

私はgrunt/gulpでこれを行うことができると思いますが、私はこのプロジェクトにそれらを含めることを避けたかったのです。

Answer 1

最近、私はこの正確な問題に取り組んできました。私はi18n example configがどのようにこれを行うことが可能であるかを説明することがわかりました。基本的にwebpackの設定は配列にすることができます。あなたはこのようなことをすることができます。

import webpack from 'webpack'; 


export default [ 
    { 
    entry: { 
     'brand-1': ['path/to/vars-1.scss', 'path/to/my.scss'], 
    } 
    // ... 
    }, 
    { 
    entry: { 
     'brand-2': ['path/to/vars-2.scss', 'path/to/my.scss'], 
    } 
    // ... 
    }, 
]; 

明らかにリストを生成することはできますが、わかりやすくするためにこのリストを作成しました。私たちのSCSS変数は動的なので、webpack設定を作成し、sassLoader.dataオプションを使って変数を注入するスクリプトを書いた。

configsを分離するためにwebpack-mergeを使用することもできます。

const common = { 
    module: { 
    loaders: { 
     // ... 
    }, 
    }, 
}; 

export default BRANDS.map((brand) => (
    merge(
    common, 
    { 
     entry: { 
     [brand.name]: [brand.variableFile, 'path/to/my.scss'], 
     }, 
     // If you needed something like this. 
     plugins: [ 
     webpack.DefinePlugin({ 
      BRAND_NAME: brand.name, 
     }), 
     ], 
    }, 
) 
)); 

私はExtractTextPluginを使用しており、ブランドごとにインスタンス化しています。それが正しいのかどうかはわかりません。

これもCommonChunksPluginとのやりとりの仕方はわかりませんが、私は何かできることを願っています。