White label sass/css with Webpack

Question

I'm trying generate multiple css files with webpack for a white labeled application.

I want to run the webpack css/sass loaders one time for each 'brand' and output it in to a separate file. I want to do this as I have a separate variable file for each brand and would want the sass to compile one css file for each brand.

I think I can do this with grunt/gulp, but I wanted to avoid including them in this project.

Answer 1

I've been working on this exact problem lately. I found the i18n example config to be illustrative of how it's possible to do this. Basically the webpack config can be an array. You could do something like this.

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'],
    }
    // ...
  },
];

Obviously you could generate the list, but I wrote it out for clarity. Our SCSS variables are dynamic, so I wrote a script that creates the webpack config and then injects the variables using the sassLoader.data option.

You may also want to use webpack-merge in order to separate the configs.

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,
        }),
      ],
    },
  )
));

I'm using the ExtractTextPlugin, and I instantiate one for each brand. I'm not sure if that's the correct thing to do.

I also have not figured out how this interacts with the CommonChunksPlugin, but I hope I can work something out.