Integrating CSS Modules

In this recipe we will add in JS CSS imports with the addition of CSS modules to the scaffold. Like with an other recipe we assume that you already created your service with the create-react-microservice CLI and it is working properly. Since this recipe shares a lot of code with the regular CSS setup, please follow the Integrating CSS / PostCSS recipe first! :-)

Table of Contents

• Changing the import statement
• Adjusting the client-side webpack config
• Adjusting the server-side webpack config

Changing the import statement

After finishing the regular CSS setup, our first step is to adapt our example css import statement in our page component, e.g. packages/my-fancy-ui/src/pages/index.js, from import './style.css' to import styles from './style.css'. Since we now import the object containing our generated class names into the JavaScript file, we can also adapt the usage, so replace <div className="exampleCssIntegrationClassName" /> to <div className={styles.exampleCssIntegrationClassName} /> and you should be done! :-)

Adjusting the client-side webpack config

Since we already finished the major work in our previous recipe, the only thing we need to adjust in our client side webpack config is to add the following two options to our css-loader in e.g. packages/my-fancy-ui-config/src/webpack.config.client.defaults.js.

{
  loader: "css-loader",
  options: {
    modules: true,
    importLoaders: 1,
    // ... other options
  }
}

Adjusting the server-side webpack config

In our Integrating CSS / PostCSS recipe we mapped all .css imports into the null-loader, since we now need to access the styles object containing the class names on the server as well, we have to align the two webpack configs. ALl you have to do for this is to import the extract-text-webpack-plugin within the server side config, initialize an instance of it and use the same module rule for .css files as you use it in your client-side config. Add the extractCss plugin instance to the plugins array and you are done!