Less to CSS made easy with our Craco plugin. Optimize your stylesheets and boost your front-end development workflow today.
npm install craco-less-compilerThis is a craco Less & Less Modules plugin, support create-react-app version >= 3.
Then install craco-less-plugin:
``bash`
$ yarn add craco-less-plugin
Here is a complete craco.config.js configuration file that adds Less compilation to create-react-app:
`js`
const CracoLessPlugin = require('craco-less-plugin')
module.exports = {
plugins: [{ plugin: CracoLessPlugin }]
}
View the less-loader documentation
For example:
`js
const CracoLessPlugin = require('craco-less-plugin')
module.exports = {
plugins: [
{
plugin: cracoLessPlugin,
options: {
modifyVars: {
hack: true;@import "${require.resolve('./src/theme.less')}";`
},
javascriptEnabled: true
}
}
]
}
using the [name].module.less file naming convention
For example:
> Button.module.less
`less``
.button {
background-color: red;
}