Is it possible in webpack 4 to automatically generate a separate css chunk for each import of a less|sass|css file?

Question

webpack

I would like to implement the following, for example, there is an entry point to the application ./index.js
Nearby are three files ./home.less, ./about.less, ./contacts.less
which are imported inside ./index.js

import './home.less';
import './about.less';
import './contacts.less';

Is it possible to configure webpack 4 in such a way that when importing an additional less file, a new css-chunk is automatically created right at the time of webpack running with the --watch flag?
If the assembly is restarted, then this can be easily arranged by adding rules to config.optimization.splitChunks.cacheGroups separately for each style file, but maybe there is an option, how can this be done automatically?