Add scss import pattern to allow importing all css/scss files from folder

Is your proposal related to a problem?

Since I’m using scss modules, I have a main scss file with some common rules that’s being imported in .jsx file. In this main scss file, I need to import all scss files from a folder. They work as template options: each imported scss is one specific template and it can grow over time, increasing the number of templates. Nowadays, I need to import every single file such like this:

mainTemplate.module.scss

// must import every single template
@import "./templates/template01.scss";
@import "./templates/template02.scss";
// ... some files later ...
@import "./templates/template20.scss";

Describe the solution you’d like

I’d like to achieve the same above with the following syntax:

mainTemplate.module.scss

// one single import ...
@import "./templates/*";
// ... and it's done!

Describe alternatives you’ve considered

I’ve found this Stack Overflow question: https://stackoverflow.com/questions/44646201/create-react-app-how-do-i-import-all-scss-files-from-a-directory/44646609#44646609 Wich refers to this npm package: https://www.npmjs.com/package/import-glob-loader

Additional context

Nothing to add

[mftb]

+1

Maybe this could be solved by adding import-glob-loader into CRA webpack.config file?

[Zephyr0402]

+1