This is a craco plugin that adds Less support to create-react-app version >= 2.
Use react-app-rewired for
create-react-app
version 1.
If you want to use Ant Design with create-react-app
,
you should use the craco-antd
plugin.
craco-antd
includes Less, and babel-plugin-import
to only include the required CSS. It also makes it easy to customize the theme variables.
craco-less
is tested with:
react-scripts
:^2.1.1
@craco/craco
:^2.2.3
First, follow the craco
Installation Instructions to install the craco
package, create a craco.config.js
file, and modify the scripts in your package.json
.
Then install craco-less
:
$ yarn add craco-less
# Or
$ npm i -S craco-less
Here is a complete craco.config.js
configuration file that adds Less compilation to create-react-app
:
const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [{ plugin: CracoLessPlugin }]
};
Pass an options
object to configure the less-loader
options:
const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
modifyVars: {
"@primary-color": "#1DA57A",
"@link-color": "#1DA57A",
"@border-radius-base": "2px"
},
javascriptEnabled: true
}
}
]
};
If you need to configure anything else for the webpack build, take a look at the
Configuration Overview section in the craco
README. You can use CracoLessPlugin
while making other changes to babel
and webpack
, etc.