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
