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版本，但它让我产生不重复代码