Craco Less Plugin
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.
Ant Design
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.
Supported Versions
craco-less
is tested with:
react-scripts
: ^2.1.1
@craco/craco
: ^2.4.0
Installation
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
$ npm i -S craco-less
Usage
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 }]
};
Configuration
You can pass an options
object to configure style-loader
, css-loader
, and less-loader
:
options.styleLoaderOptions
options.cssLoaderOptions
options.lessLoaderOptions
For example, to configure less-loader
:
const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
modifyVars: {
"@primary-color": "#1DA57A",
"@link-color": "#1DA57A",
"@border-radius-base": "2px"
},
javascriptEnabled: true
}
}
}
]
};
CSS Modules
You can configure the css-loader
options to set up CSS modules. For example:
const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
cssLoaderOptions: {
modules: true,
localIdentName: "[local]_[hash:base64:5]"
}
}
}
]
};
CSS modules gotcha
There is a known problem with Less and CSS modules regarding relative file paths in url(...)
statements. See this issue for an explanation.
(Copied from the less-loader README.)
Further Configuration
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.
Contributing
Install dependencies:
$ yarn install
$ npm install
Run tests:
$ yarn test
Before submitting a pull request, please check the following:
- All tests are passing
- 100% test coverage
- Coverage will be printed after running tests.
- Open the coverage results in your browser:
open coverage/lcov-report/index.html
- All code is formatted with Prettier
- Run
prettier --write **/*.js
- If you use VS Code, I recommend enabling the
formatOnSave
option.
License
MIT