cssModules localsConvention = 'camelCase' is not reflecting in nuxt app

[tareq89]

Version

v2.12.2

Reproduction link

https://codepen.io/tareq89/pen/Yzywwbe

Steps to reproduce

In the nuxt.config.js file

build: {
extend: (config, ctx) {
ctx.loaders['cssModules'].modules.localIdentName = ctx.isDev ? '[name]__[local]' : '[hash:base64:10]'
ctx.loaders['cssModules'].localsConvention = 'camelCase'
}
}

What is expected ?

In the vue component, the css class 'Banner--red' should be generated like this.$style.banerrRed = 'Banner--red'

What is actually happening?

In the vue component, the css class 'Banner--red' is being generated like this.$style.['Banner--red'] = 'Banner--red'

Additional comments?

How this problem can be solved? it looks like configuring cssModule loader from nuxt.config.js is not working.

[stale]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[yura3d]

@tareq89 I was only able to do this by adding localsConvention directly to css-loader options:

build: {
  extend (config) {
    config.module
      .rules.find(({ test }) => test.toString() === /\.css$/i.toString())
      .oneOf.find(({ resourceQuery }) => resourceQuery && resourceQuery.toString() === /module/.toString())
      .use.find(({ loader }) => loader === 'css-loader')
      .options.localsConvention = 'camelCaseOnly'
  }
}

May be it looks some wordy, but it works.

Of course, it would be better if Nuxt provides references for loaders' options in context or in some other simplified config entity to prevent manually injection to complex webpack config. I tried doing something described in the first post (with ctx object as 2nd argument for extend()), but without any results.

[danielroe]

@yura3d Something like https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#loaders ?

[yura3d]

@danielroe Thanks, now everything is simple and elegant:

build: {
  loaders: {
    cssModules: {
      localsConvention: 'camelCaseOnly'
    }
  }
}

Hope it will be useful for users that will come here from Google, like me.