I used create-react-app(typescripts) to build a project, and added antd@3.26.13 with customize-cra as the website I was following told me.
I would like use the module.css, and I want to use module.less, like css, but encountered some error messages:
./src/layout/basic.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/layout/basic.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? }
My code follows:
const {
override,
addWebpackAlias,
fixBabelImports,
addLessLoader,
addDecoratorsLegacy
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"@":require('path').resolve(__dirname,"src")
}),
fixBabelImports('import',{
libraryName:'antd',
libraryDirectory:'es',
style:true
}),
addLessLoader({
javascriptEnabled:true,
modifyVars:{'@primary-color':'#1DA57A'},
}),
addDecoratorsLegacy()
);
The current version of customize-cra
isn't compatible with the latest version of create-react-app
, to be precise with css-loader
. Try to install customize-cra@next
to get alpha version. They fixed that issue there.