Integrating CSS / PostCSS

In this recipe we will add in JS CSS imports 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.

Table of Contents

Adding an example CSS import to the scaffold

First let's add an generic CSS file into the main applications package, head into e.g. packages/my-fancy-ui/src/pages/ and create a style.css file and paste the following contents into it.

.exampleCssIntegrationClassName {
  color: red;

Afterwards open up the pages/index.js, import the css file, e.g. import './style.css' and propagate the className a div, e.g. <div className="exampleCssIntegrationClassName" />.

Installing new dependencies

After creating the integration, let's install all dependencies that are needed to let webpack know how to process CSS files. Head into your config package, e.g. packages/my-fancy-ui-config/ and execute the following commands.

yarn add style-loader css-loader null-loader postcss-loader extract-text-webpack-plugin autoprefixer

Configuring PostCSS

Since we want to use PostCSS we should add a config file for postCSS on the same level as the webpack configs, e.g. packages/my-fancy-ui-config/src/postcss.config.js. Create the file and insert the following contents into it.

module.exports = {
  plugins: {
    autoprefixer: {}

Configuring Flow

Out of the box Flow will not be able to parse / understand the css imports, we re-map every .css import into an empty object type, add the following line into the [options] of the build/.flowconfig file in the root of your mono repository.

module.name_mapper='.*\(.css\)' -> 'empty/object'

Adjusting the server-side webpack config

Since we don't need to compile the CSS for the server, let's head into the default configuration of webpack for the server side bundle, e.g. packages/my-fancy-ui-config/src/webpack.config.server.defaults.js. Open up the file and add the following snippet into the module.rules array.

  test: /\.(scss|sass|css)$/,
  use: "null-loader"

Adjusting the client-side webpack config

Afterwards we can continue with the client webpack configuration, open up the default configuration of webpack for the client side bundle, e.g. packages/my-fancy-ui-config/src/webpack.config.client.defaults.js. Open up the file and add the following constants to the top of the file.

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractCss = new ExtractTextPlugin({
  filename: "[name].[contenthash].css"

... and jump to the module.rules array and add the following rule to it.

  test: /\.(css|scss|sass)$/,
  use: extractCss.extract({
    use: [
        loader: "css-loader",
        options: {
          minimize: !isDev,
          sourceMap: config.webpack.hasSourceMaps
        loader: "postcss-loader",
        options: {
          config: {
            path: path.resolve(__dirname, "postcss.config.js")
          sourceMap: config.webpack.hasSourceMaps
    fallback: "style-loader"

... and to finalize everything, add the extractCss plugin to the webpack configs plugins array, e.g.

plugins: [

  // ... other plugins

And that's it - If you execute a yarn run build && yarn run start or yarn run dev in the root of your mono-repository you should see the headings now in red and the css being served to the client! :rocket:

results matching ""

    No results matching ""