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

[sasha-3ap]

I run version 8.12.0 of nx

As described here it is possible to user sass modules in react app:
import styles from './Component.module.scss';

and use it:

<button className={styles.css-class}> </button>

Is this possible with nx?

[jaysoo]

We only support .module.css files right now, but we can add in SCSS support in the next version.

[sasha-3ap]

We only support .module.css files right now, but we can add in SCSS support in the next version.

That would be great and it would complete react css/scss module support.

[lmaze]

Hi there,

Thanks for this feature. I tested it with the latest version of Nx (9.2.4). Everything seems to work fine but the option stylePreprocessorOptions and the includePaths attribute do not seem to be taken into account with files of this type (.module.scss).

Here is an example of the build object I am using. It is very basic.

"build": {
          "builder": "@nrwl/web:build",
          "options": {
            "outputPath": "dist/apps/my-app",
            "index": "apps/my-app/src/index.html",
            "main": "apps/my-app/src/index.tsx",
            "polyfills": "apps/my-app/src/polyfills.ts",
            "tsConfig": "apps/my-app/tsconfig.app.json",
            "assets": ["apps/my-app/src/favicon.ico", "apps/my-app/src/assets"],
            "styles": ["apps/my-app/src/index.scss"],
            "stylePreprocessorOptions": {
              "includePaths": [
                "./node_modules",
                "./apps/my-app/src"
              ]
            },
            "scripts": [],
            "webpackConfig": "@nrwl/react/plugins/webpack"
          },

This conf works well with the other .scss files.

I think you can reopen the ticket.