I want to load all the .scss files from a scssFolder folder and output the file to the src/folder/temp folder.

- appName
  - scssFolder
    - a.scss
    - b.scss
    - more 20 scss files
  - *otherFiles
  - src
  - webpack.config.js

The folder structure, as shown above, has a scssFolder in which there are all the .scss files whose variables need to be processed and output in another file inside src/folder/temp.

a.scss : 

:root {
 @extend .colors
 @extend .elements
}

.colors {
  --a-00 : #ffff;
}

.element {
  --anchor-title: #000;
}

.scheme-2 {
  --random-variable: #000;
}

In the above file the object extended inside the root must be output in the src/folder/root and the other remaining object should be in the file same as the object name src/folder/scheme2.

Is this possible in webpack?