React - Using SASS Modules with includePaths fail

The merge request https://github.com/nrwl/nx/pull/2719 brought support for SASS Module.

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 the type .module.scss.

When I remove the extension .module and use a basic Sass file, paths indicated in the includePaths property are taken into account and everything works fine.

To test, I just created a new React application and added a stylePreprocessorOptions option at the build level of the application.

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

I tried to do a specific webpack configuration to work around the problem but it doesn’t work either.

const path = require('path');
const getConfig = require('@nrwl/react/plugins/webpack');
const cssModuleRegex = /\.module\.scss$/;

module.exports = (config) => {
  config = getConfig(config);

  config.module.rules.forEach((rule, idx) => {
    // Find rule tests for SCSS.
    // Then make sure it excludes .module.scss files.
    if (rule.test.test('foo.scss')) {
      rule.exclude = rule.exclude
        ? Array.isArray(rule.exclude)
          ? [...rule.exclude, cssModuleRegex]
          : [rule.exclude, cssModuleRegex]
        : cssModuleRegex
    }
  });

  // Add new rule to handle .module.scss files by using sass-loader
  // with modules on.
  config.module.rules.push({
    test: /\.module\.scss$/,
    use: [
      { loader: 'style-loader' },
      { loader: 'css-modules-typescript-loader' },
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1
        }
      },
      {
        loader: 'sass-loader',
        options: {
          sassOptions: {
            precision: 8,
            includePaths: [
              path.resolve(__dirname, 'apps/test-app/src'),
            ],
          },
        },
      },
    ]
  });

  return config;
}

[mboettcher]

@bekos I think it still doesn’t work for *.module.scss files. When I manually add the includePaths to the config of test: /\.module\.(scss|sass)$/, in web.config.js it works fine.

[Pekes317]

Hi All, this seems to be similar issue I was having where the SCSS Modules weren’t compiling. After some investigation it looks like the Webpack config is missing the sass-loader from the rule for the test: /\.module\.(scss|sass)$/,

@nrwl/web - web.config.ts

 {
     test: /\.module\.(scss|sass)$/,
      use: [
           {
              loader: options.extractCss
                ? MiniCssExtractPlugin.loader
                : 'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
              },
            },
          ],
        },

I was able to work around it by using my own WebPack config to Modify the Rule which seems work.

/* eslint-disable */
const reactConfig = require('@nrwl/react/plugins/webpack');
const mergeWebpack = require('webpack-merge');

module.exports = (config, _options) => {
  const rule = { ...config.module.rules[1] };
  const sassModule = rule.oneOf[1];
  const cssLoader = sassModule.use[1];
  const { options } = cssLoader;
  const sassLoader = {
    loader: 'sass-loader',
    options: {
      implementation: require('sass'),
    }
  }

  cssLoader.options = { ...options, importLoaders: 2 };
  sassModule.use.push(sassLoader);
  config.module.rules.splice(1, 1);

  return mergeWebpack(reactConfig(config), {
    module: {
      rules: [rule]
    }
  });
};

Also, I was having trouble using @use './some-file.scss' syntax which seems to be a newer add to SCSS which could be fixed by updating the sass deps which is currently 1.22.9 and the latest 1.26.8. Thank you and have a nice day.

P.S. I have a fork with suggested changes to resolve this issue here