nx webpack css-loader issue

Question

const { merge } = require('webpack-merge');
const sass = require('sass');

module.exports = (config, context) => {
    return merge(config, {
        module: {
            rules: [
                {
                    test: /\.sass$/i,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                modules: {
                                    localIdentName: '[local]__[hash:base64:5]'
                                }
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: sass
                            }
                        }
                    ]
                }
            ]
        }
    });
};

freshly generated nx workspace with react project in it. trying to make a custom webpack.config to generate the hashes via sass files

but there is a lot of errors falling down.

Also i tried configure the babel. Added the plugin babel-plugin-react-css-modules and that's doesn't help

Did you ever figure this out, having a very similar problem! — JabbaWook, Aug 31 '22 at 15:25

score 0 · Answer 1 · answered May 24 '23 at 07:58

NX has it's own style-loader which is part of the config which You are merging.

To resolve this, You will have to remove that loader from NX config. I did it manually by looping through all of the module.rules and ignoring whichever I don't want. So to fix Your issue, You would do it this way:

module.exports = (config, context) => {
  const conf = merge(config, {
    module: {
      rules: [
        {
          test: /\.sass$/i,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[local]__[hash:base64:5]'
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                implementation: sass
              }
            }
          ]
        }
      ]
    }
  });

  // Remove unwanted NX rules
  const mods = [];
  conf.module.rules.forEach((rule) => {
    if (rule.test != '/\\.css$|\\.scss$|\\.sass$|\\.less$|\\.styl$/') {
      mods.push(rule);
    }
  });
  conf.module.rules = mods;

  return conf;
};

This took me a long time to figure out. Your CSS rule might be different, depending on Your NX version. Just console.log(rule.test) to check what is the rule which You want to ignore.

nx webpack css-loader issue

1 Answers1