How to change file name in wabpack loader and pass new name to another loader (or how to change styles at assembly level)?

Question

css

How do I tell webpack to convert the name of a file that matches the '*__style__.css' mask to a different name depending on the parameters passed to webpack and call the next loader with the converted name?
Here is an example config:

rules: [
  {
    test: /.*__style__\.css$/,
    loader: /* 
        ... как заменить '__style__' на `${env.STYLE_REF}` и 
        and передать дальше в css-loader ???? 
     */
  },
  /*...и т.д. ....*/

The task is to force the component to import the style depending on the environment.
For example, test-component.jsx:

import React from 'react';
import css from './__style__.css';
/* ... component code ...*/

If you run webpack --env.STYLE_REF=dark, then the component should import the style from './dark.css'
And if webpack --env.STYLE_REF=light, then from './light.css'
This can be done using webpack ? Or are there some simpler solutions?

Answer 1

The first thing that comes to mind is something like this:
And from the webpack to the code, pass the theme variable through DefinePlugin.
The second option is to dynamically generate resolve.alias and write import '__current-theme.css' in the code. Something like this:

alias: {
  '__current-theme.css': path.resolve(__dirname, process.env.STYLE_REF)
}

The second option is better, perhaps, the first one will result in unnecessary code splitting.