The problem we're trying to solve by being able to write modular CSS is having all the CSS, images, and other resource files split across many React components folders. When module bundler creates the application bundle (build/public/client.js in our case), it should be able to resolve all the CSS files, images, and other assets used in the app and either inject them into the application bundle itself or copy to the output (build/public) folder during compilation.
In order to solve this problem, let's install the following npm modules:
postcss: Pre-processor for CSS filespostcss-import: PostCSS plugin that allows referencing other CSS files in your code, for example,@import '../variables.scss'postcss-loader: PostCSS loader for Webpackprecss: PostCSS plugin that enables Sass syntax in CSS filesautoprefixer: PostCSS plugin that appends vendor-specific CSS rulescss-loader: Webpack loader that parses CSS and enables CSS modulesstyle-loader: Webpack loader...