白色標籤sass /與Webpack的css

Question

我試圖生成與webpack白色標記的應用程序的多個css文件。

我想爲每個「品牌」運行一次webpack css/sass加載器，並將其輸出到單獨的文件中。我想這樣做，因爲我對每個品牌都有單獨的變量文件，並且希望sass爲每個品牌編譯一個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選項注入變量。

您可能還想使用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交互，但我希望我能解決一些問題。