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
• Installing new dependencies
• Configuring PostCSS
• Configuring Flow
• Adjusting the server-side webpack config
• Adjusting the client-side webpack config

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: [
  extractCss,

  // ... 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: