cannot use module.less in newest create-react-app

[liresky]

if use [component].module.less, will be cause error as follow

./src/pages/Login/Login.module.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-3!./src/pages/Login/Login.module.less) ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'localIdentName'. These properties are valid: object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }

this is a break changes in css-loader. css-loader#2197 default config like this

{
      test: lessModuleRegex,
      use: getLessLoader({
        importLoaders: 2,
        modules: { localIdentName: localIdentName}
      })
    }

[ruige11111]

me too

[liresky]

me too

不要在代码中使用 xxx.module.less，使用xxx.less然后引用，或者是参考上面的把custom_cra那一块给改掉就可以了。

[xushengs]

It seems to be fixed until V1.0, related issue is #201, and the solution is to downgrade your css-loader to 2.1.1 .

[xushengs]

It seems to be fixed until V1.0, related issue is #201, and the solution is to downgrade your css-loader to 2.1.1 .

Just tried customize-cra@next, it works now.

[Grimones]

For those who don't want to upgrade to v1.0.0-alpha You can use this workaround

adjustStyleLoaders(({ test, exclude, use: [, css] }) => {
  const file = 'index.module.less';

  if (test.test(file) && (!exclude || !exclude.test(file))) {
    css.options.modules = {
      localIdentName: css.options.modules.localIdentName,
    };
    css.options.localsConvention = 'camelCase';

    delete css.options.localIdentName;
  }
})