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:
Now lets split that up to add a second entry:
2. Update the MiniCssExtractPlugin
Scroll down to the MiniCssExtractPlugin settings in the same file as above. Right now it looks like this:
Update this section to look like this instead:
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