Configuring webpack to generate two or more css files

If you are going to use a multi-site setup where the sites should look a bit different to each other you need to change the default webpack configuration that is delivered with the Accelerator.

This is tested with the first version of the Litium 8 accelerator. Previous and later versions may differ.

1. Change entries

Add a new .scss file at Litium.Accelerator.Mvc/Client/Styles that we call secondsite.scss.

The existing site.scss has been renamed to firstsite.scss in this example.

Open up Litium.Accelerator.Mvc/Client/webpack/webpack.es6.js and find the entry points. At the time when I’m writing this post the entries looks like this:

entry: {
    app: [
        path.resolve(JS_DIR, 'index.js'),
        path.resolve(CSS_DIR, 'site.scss'),
    ],
},

Now lets split that up to add a second entry:

entry: {
    app: [
        path.resolve(JS_DIR, 'index.js'),
    ],
    firstsite: [
        path.resolve(CSS_DIR, 'firstsite.scss'),
    ],
    secondsite: [
        path.resolve(CSS_DIR, 'secondsite.scss'),
    ]
},

2. Update the MiniCssExtractPlugin

Scroll down to the MiniCssExtractPlugin settings in the same file as above. Right now it looks like this:

plugins: [
    new RemovePlugin({
        before: {
            include: [BUILD_DIR],
            log: false,
        },
    }),
    new MiniCssExtractPlugin({
        filename: '../css/site.min.css',
    }),
    // new BundleAnalyzerPlugin(),
],

Update this section to look like this instead:

plugins: [
    new RemovePlugin({
        before: {
            include: [BUILD_DIR],
            log: false,
        },
    }),
    new MiniCssExtractPlugin({
        filename: '../css/[name].min.css',
    }),
    // new BundleAnalyzerPlugin(),
],

If you have yarn run build:w running you should restart it. This will generate two separate .css-files in the output directory.

3.Reference the correct file

This is out of scope of the post so I leave this up to you. But you must reference the correct css-file in Litium.Accelerator.Mvc/Views/Framework/Head.cshtml

4. Read more

You can read more about Webpack Entry points in the official docs