How to specify localIdentName using @neutrino/style-loader

[turboki]

I've noticed that the when using style-loader with css modules, if I start with a class name .container {...} the generated names end up like _1sCSwMf6coBA8YISNf8Czs which makes it almost impossible to debug because the original source name is missing. Is there a way to override the localIdentName prop in css-loader to actually specify how the module named properties should be generated?

[eliperelman]

@turboki yes, you should be able to pass options, depending on whether you are using the middleware directly or via a web-based preset:

// if using the style middleware directly
module.exports = {
  use: [
    ['@neutrinojs/style-loader', {
      css: {
        localIdentName: '[path][name]__[local]--[hash:base64:5]'
      }
    }]
  ]
};

// if using a web-based preset like react
module.exports = {
  use: [
    ['@neutrinojs/react', {
      style: {
        css: {
          localIdentName: '[path][name]__[local]--[hash:base64:5]'
        }
      }
    }]
  ]
};

See also:

https://neutrino.js.org/packages/web/#rules https://neutrino.js.org/packages/style-loader/#usage

[turboki]

Oh yes, thats perfect! I totally missed the css and style props when reading the docs...thats what happens when you try and code at 1:30am.

Cheers!!!

[eliperelman]

My pleasure!

[QQCif]

Hi, sorry for the bump. Upgrade old site from v9 rc3 to v9 stable, style was broken. I found out v9 comes with css-loader v3, tried to add modules object to css object then every stylesheet becomes css module even plain css files. After reading the source of @neutrino/style-loader, turns out localIdentName shall be set in the modules object instead of css object.

// if using a web-based preset like react
module.exports = {
  use: [
    ['@neutrinojs/react', {
      style: {
        modules: {
          localIdentName: '[path][name]__[local]--[hash:base64:5]'
        }
      }
    }]
  ]
};

The current doc for custom loader gives me the impression that modules can only be boolean value at first read, maybe because I am not a native speaker. The connection between modules and css-loader is at the bottom of the page.

[elpddev]

@QQCif Thanks you. Your suggestion was very helpful.