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).

[katyapavlenko]

@jaysoo thank you for css mosules support!
But I see that initial class names is removed in serve mode
I really miss them for debugging. Is there any settings I can change to see initial class names?

[itsTalwar]

@jaysoo this works well for apps, but it is failing in libs.

[20Koen02]

Still failing in libs. Are there any work arounds?

[kryver]

Same problem here, anyone found a solution?

[cuanclifford]

Is there a reason that SCSS modules are used by default if they're not supported?

[solshark]

Why this is closed?

[lihongwang]

Any update about lib support SCSS modules?

[ikapo]

Looking forward to an update as well

[Bolza]

Anything new? I'm on version 14.1.9 still no css modules support?
What's the alternative?

[niyowski]

I get the following error for a React component in a ui lib while using CSS modules:

Property 'container' comes from an index signature, so it must be accessed with ['container']

I disabled noPropertyAccessFromIndexSignature. The error in IDE gone but the app didn't run.

[rishabh2712]

The problem still persists. The IDE config is gone, but the dev build still fails.

[espretto]

If *.css files where to be handled by a custom loader, that would have to be configured in both the webpack and rollup configs using their respective plugins.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.