Using a Webpack and PostCSS environment I would like to import all CSS files in my Components folder and the subdirectory. I've tried both PostCSS plugins postcss-easy-import & postcss-import and know they both need to come first. Regular Imports with direct paths work, could it be that ** placeholders don't work?
Thanks in advance
The best practice to import css or scss files is importing all your css files or components in one main.css or scss file. Then import that file in your entry *.js file and finally set that *.js file in your webpack config file as an entry.
For example if you have a folder called
SampleProject
and a folder and file structure like this:Then you can import all you 3 style files in your main.css file like below:
main.css
Then you can import the main.css file into index.js with other js chunks like this:
index.js
Finally, you can use this index.js as an entry point into your webpack config file like this:
webpack.prod.js:
And
MiniCssExtractPlugin
will extract all styles of your project automatically and save them as one file inbuild
folder in root of your project.