Add less loader to any create-react-app using customize-cra
npm install customize-cra-less-loader
Add less loader to any create-react-app using customize-cra.
Support with css-loader v3.
> Only support react-scripts version >= v5.0.0.
> If PR 255 been merged into master,
> you don't need this modules
First, install customize-cra-less-loader, less and less-loader packages:
``sh`
npm i -D customize-cra-less-loader less less-loader
// or yarn add --dev customize-cra-less-loader less less-loader
After it's done, call addLessLoader in override like below:
`js
const { override } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");
module.exports = override(addLessLoader(loaderOptions));
`
loaderOptions is optional. If you have Less specific options, you can pass to it. For example:
`js
const { override } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");
module.exports = override(
addLessLoader({
cssLoaderOptions: {
sourceMap: true,
modules: {
localIdentName: "[hash:base64:8]",
},
},
lessLoaderOptions: {
lessOptions: {
strictMath: true,
},
},
})
);
`
Check Less document for all available specific options you can use.
Once less-loader is enabled, you can import .less file in your project.
And .module.less will use CSS Modules.
> if you use TypeScript (npm init react-app my-app --typescript) with CSS Modules, you should edit react-app-env.d.ts.
`ts`
declare module "*.module.less" {
const classes: { [key: string]: string };
export default classes;
}
DefinitelyTyped only works because of contributions by users like you!
Follow the Angular git commit message specification
But, you can ignore the scope`
MIT RoXoM