react - using CSS Modules in a Nrwl NX workspace

Any update about lib support SCSS modules?

Hi @maku

We don’t currently support CSS modules but we can look at extending our builder for it.

The workaround right now is to provide your own custom webpack to the web builder.

Look in your workspace.json file for your app and you should find a build entry under architect.

  "build": {
    "builder": "@nrwl/web:build",
    "options": {
      "differentialLoading": false,
      "outputPath": "dist/apps/demo",
      "index": "apps/demo/src/index.html",
      "main": "apps/demo/src/main.tsx",
      "polyfills": "apps/demo/src/polyfills.ts",
      "tsConfig": "apps/demo/tsconfig.app.json",
      "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
      "styles": ["apps/demo/src/styles.css"],
      "scripts": [],
      "webpackConfig": "@nrwl/react/plugins/babel"
    }

You need to switch webpackConfig with your own, such as "./apps/demo/webpack.config.js". Please change demo to your actual app name.

Now, you need to provide the config function like this:

https://gist.github.com/jaysoo/431828f47e5202d3e4afc6c34fdac2c0

This function modifies the webpack config by adding a rule to handle .module.css files, as well as exclude these files from other rules.

There will be more configuration beyond that, especially for production builds, postcss (if you use that), etc.