Nx: react - using CSS Modules in a Nrwl NX workspace

[maku]

I run version 8.4.12 of nx

I would like use css modules in a react app

In a recent react project, created with "create-react-app", I am able to use css modules.

e.g.
import classes from './MyComponent.module.css';

and the usage:

<div className={classes.my-css-class}> </div>

How is this possible with nx?

[jaysoo]

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.

[maku]

Hi @jaysoo,

thank you for answering. I would only use css modules when I don't have to fiddle around with the config (mainly I use Angular but I am curious about the React features in nx). But from my point of view it would make sense when nx is able to handle css modules...

[jaysoo]

@maku Sounds good. I'm doing some refactoring on our babel support. After that is done this should be easy to add.

[sanjevirau]

@jaysoo I tried configuring the webpack configuration like mentioned above. Nx compiled it successfully but the class name doesn't seems to be shown in the render.

Can I know the workaround to configure css modules in .scss?

[jaysoo]

@sanjevirau See this demo here https://github.com/jaysoo/css-modules-example. Make sure you change webpackConfig in your workspace.json (or angular.json if you are using Angular CLI).

Specifically, see https://github.com/jaysoo/css-modules-example/tree/master/apps/demo/src/app.

[jaysoo]

Support for CSS modules have been added. It's the same as CRA so you need to name your files as *.module.css in order for it to kick in.

[LucaFilitz]

How can I use scss modules in a react app in nx?

[TheAifam5]

Same here, but for less?

[jaysoo]

@LucaFilitz @TheAifam5 You will need to provide your own webpack config extensions.

Something like this:

• Switch out the default webpackConfig path
  
  
  
  • https://github.com/jaysoo/css-modules-example/blob/master/workspace.json#L22
  
  
• Add a rule for CSS Modules + LESS/SCSS/...
  
  
  
  • https://github.com/jaysoo/css-modules-example/blob/master/apps/demo/webpack.config.js#L21-L34
  
  

[LucaFilitz]

https://hastebin.com/jugohuxupu.js

This is a custom webpack config for .s[a/c]ss, .css and .module.s[a/c]ss
If you want you can easily add .module.css (see the example above)
Hope this helps anyone :)

_I had help from @jaysoo ... psst :p
thanks again for all your help :)_

[maierson]

This works well except when adding sass variables:

// scss
$box-color: #fff;

.my-box {
   background-color: $box-color;
}

Which doesn't replace the variable with its value in the compiled css

// css
.hash {
  background-color: $box-color; // this should be #fff
}

(it does work with non module .scss files out of the box).