Webpack：從相同的來源生成多個CSS文件

Question

我試圖從webpack 2生成2個不同的CSS文件來源於相同的SCSS源文件，以便有替代樣式表而不需要重複代碼。我已經成功生成了兩個表單，通過評論一個表單，但無法弄清楚如何同時生成它們。我的WebPack配置（縮短相關性）是：

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const webpack = require('webpack'); 
const path = require('path'); 

const ExtractLightCss = new ExtractTextPlugin("app-light.css") 
const ExtractDarkCss = new ExtractTextPlugin("app-dark.css") 

module.exports = { 
    ... 
    module: { 
     rules: [ 
      { 
       test: /\.scss?$/, 
       use: ExtractLightCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: true;"}} ]}) 
      }, 
      { 
       test: /\.scss$/, 
       use: ExtractDarkCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: false;"}} ]}) 
      }, 
      ... 
     ] 
    },  
    plugins: [ 
     ExtractLightCss, 
     ExtractDarkCss 
    ] 
}; 

如果我試圖在這個配置的WebPack運行，我得到的錯誤說

ERROR in ./~/css-loader!./~/sass-loader?{"data":"$light: true;"}!./~/extract-text-webpack-plugin/loader.js?{"id":2,"omit":1,"remove":true}!./~/style-loader!./~/css-loader!./~/sass-loader?{"data":"$light: false;"}!./styles/[filename].scss 

這使得它看起來像它在同時運行的規則集同時，而不是同時運行另一個。

有沒有辦法做到這一點？

Answer 1

我做了進一步的研究，似乎沒有直接的方法來做到這一點（我發現https://survivejs.com/webpack/foreword/是一個很好的資源）。但是我找到了解決辦法。我使用'composing-configuration'以防止重複的方式創建我的模塊規則，然後導出這兩個配置，以便webpack同時構建它們。一個簡單的例子是：

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const merge = require('webpack-merge'); 

const deploymentSass = (light) => { 
    return { 
     module: { 
      rules: [ 
       { 
        test: /\.scss?$/, 
        use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", { 
         loader: "sass-loader", 
         options: { 
          data: light ? "$light: true;" : "$light: false;", 
         }} ]}), 
       }, 
      ], 
     }, 
     plugins: [ 
      new ExtractTextPlugin(`app-${light ? 'light' : 'dark'}.css`), 
     ], 
    }; 
}; 

const lightTheme = merge(qaConfig,      
        deploymentSass(true)); 

const darkTheme = merge(qaConfig, 
        deploymentSass(false)); 

module.exports = [ 
    lightTheme, 
    darkTheme, 
] 

這是不是一個完美的解決方案，因爲它涉及2版本，但它讓我產生不重複代碼