How to Customize Razzle.js css-modules options

[majidghafoorzade]

I want to config css-modules in my Razzle app and change "localIdentName" option to only display hash in my class names.

This is my razzle.config.js :

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

module.exports = {
    plugins: ['scss'],
    modify( config ) {

        const cssLoaderFinder = makeLoaderFinder('css-loader');
        const cssRule = config.module.rules.find(cssLoaderFinder);
        cssRule.use.find(cssLoaderFinder).options.localIdentName = "[hash:base64:5]";
    }
};

But it not works! How I can do this?

[majidghafoorzade]

I resolve it by :

'use strict';

const cloneDeep = require('lodash.clonedeep');
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');


module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    const configClone = cloneDeep(config);
    const cssLoaderIndex = configClone.module.rules.findIndex(makeLoaderFinder('css-loader'));

    if (opts.env.target === 'node') {
      config.module.rules[cssLoaderIndex].use[0].options.modules.localIdentName = "[hash:base64:5]";
    } else {
      config.module.rules[cssLoaderIndex].use[1].options.modules.localIdentName = "[hash:base64:5]";
    }
    
    return config;
  },
};

Hope it can help you if you have similar problem :)

[fivethreeo]

localIdentName fixed in v3.3.9