Support css-loader@^3.0.0 (+ addLessLoader)

[with-heart]

As part of the 1.0 release, we need to support css-loader@^3.0.0 which was added to create-react-app in #7876.

Currently we have merged #185 into the next branch (published as customize-cra@next), which should support the new css-loader configuration format, but I'm not familiar enough with how users consume css-loader/less-loader to know how best to support this.

I am looking for help testing customize-cra@next regarding this change and feedback on how addLessLoader is implemented. Specifically, #185 changes the value of localIdentName and does not provide a way to override other parts of the modules object, such as getLocalIdent.

What do we need for this to work well for most users?

cc: @Menci @onlyling @iuvword @kunjiang

[Menci]

How about changing the API to just pass addLessLoader's loaderOptions.cssLoader down to css-loader, merging with the default options?

[edwardwang0302]

How about changing the API to just pass addLessLoader's loaderOptions.cssLoader down to css-loader, merging with the default options?

and compatible with the old way pass localIdentName derectly in loaderOptions , and add a second optional param customCssModules which will be passed to css-loader only without define cssLoader/cssModules property in loaderOptions.

Here is my PR

[hugobarragon]

How about changing the API to just pass addLessLoader's loaderOptions.cssLoader down to css-loader, merging with the default options?

and compatible with the old way pass localIdentName derectly in loaderOptions , and add a second optional param customCssModules which will be passed to css-loader only without define cssLoader/cssModules property in loaderOptions.

Here is my PR

Hi, is it possible to focus on this? is this a good solution, for my projects this is a show stopper i am available to help in any way possible :/

[hellllll0world]

Any workaround for this ?

[hugobarragon]

Any work around for this ?

yes, for now i installed "css-loader": "2.1.1" until the fix is made, and works great

[hellllll0world]

Any work around for this ?

yes, for now i installed "css-loader": "2.1.1" until the fix is made, and works great

thanks for the suggestion, I've tried this and it works great for me too.

[woshilaoda97]

Any work around for this ?

yes, for now i installed "css-loader": "2.1.1" until the fix is made, and works great

thanks!! it worked

[Ahmdrza]

I can't use addLessLoader. I have tried this

addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#A80000' },
  },
}),

and this

addLessLoader({
  javascriptEnabled: true,
  modifyVars: { '@primary-color': '#A80000' },
}),

But I keep getting error this error

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/antd/es/button/style/index.less)
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'source'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap? }

Searched everywhere but can't find any solution for this.

[TennyZhuang]

I can't use addLessLoader. I have tried this

addLessLoader({

  lessOptions: {

    javascriptEnabled: true,

    modifyVars: { '@primary-color': '#A80000' },

  },

}),

and this

addLessLoader({

  javascriptEnabled: true,

  modifyVars: { '@primary-color': '#A80000' },

}),

But I keep getting error this error

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/antd/es/button/style/index.less)

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

 - options has an unknown property 'source'. These properties are valid:

   object { lessOptions?, prependData?, appendData?, sourceMap? }

Searched everywhere but can't find any solution for this.

use customize-cra@next and lessOption works well.

[Ahmdrza]

@TennyZhuang thanks a lot 👍

[ChnTklc]

I can't use addLessLoader. I have tried this

addLessLoader({

  lessOptions: {

    javascriptEnabled: true,

    modifyVars: { '@primary-color': '#A80000' },

  },

}),

and this

addLessLoader({

  javascriptEnabled: true,

  modifyVars: { '@primary-color': '#A80000' },

}),

But I keep getting error this error

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/antd/es/button/style/index.less)

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

 - options has an unknown property 'source'. These properties are valid:

   object { lessOptions?, prependData?, appendData?, sourceMap? }

Searched everywhere but can't find any solution for this.

use customize-cra@next and lessOption works well.

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }

"customize-cra": "^1.0.0-alpha.0",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"react-scripts": "^5.0.0",

This solution did not fix my problem any other suggestions?