Create-react-app: How can i use Less with create-react-app

[kennylbj]

I am using this awesome boilerplate to build my own project. I wanna use Less in my project but encountered some problems.
It took me a lot of time to investigate how to combine Less with create-react-app, however I couldn't find the best practice without ejecting the config. I also tried to use less-loader but it seems hard for me to config.
Could you please provide a usage of using Less with create-react-app in best practice? thx.

[Dubes]

Perhaps it is worth keeping a watch on #2467. It might also be of helpful if you could add the problems or challenges you faced to that ticket.

[heyimalex]

You can't use something like less-loader or anything that plugs into webpack without ejecting. There are instructions in the readme for sass that are equally applicable to less, but the gist is that you need to run a separate watch process that compiles your less into css and then import the compiled css.

[JFGHT]

This is my package.json configuration:

"scripts": {

"build-css": "lessc sourcepath/mylessfile.less destinypath/mygeneratedcssfile.css --source-map=destinypath/mygeneratedmapfile.css.map",

"watch-less": "less-watch-compiler sourcepath destinypath mylessfile.less --source-map"

}

Using http://lesscss.org/ and https://github.com/jonycheung/deadsimple-less-watch-compiler.

[kennylbj]

Thx your guys.

It seems that the issue can be resolved by:

1. Eject the configuration if you want to use plugins of webpack such as less-loader.
2. Config Less watch process(less-watch-compiler) in package.json without ejecting.
3. Waiting for official support for less or css modules without additional configuration.

I am also wondering how could ant-design-pro support Less and css modules without any less-related configuration.

[mengyou658]

less-watch-compiler has some problem in my project not fix at now:

1. less import from node_modules raise error
2. can not build the file on the origin dir. have not finish the develp in the issue
   this is the ant-design doc solution without ejecting

[sstruct]

Here is a workaround:

npm i less-watch-compiler -D

then add these lines to npm scripts:
"build-css": "less-watch-compiler --run-once --main-file=index.less src/less/ src/less/", "watch-css": "npm run build-css && less-watch-compiler --main-file=index.less src/less/ src/less/",

ref: adding-a-css-preprocessor-sass-less-etc

[Timer]

Closing this as answered, simply follow the instructions here but modify them for Less: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc.

[ndbroadbent]

If you would like to use Less with create-react-app v2, there is a new configuration management tool called craco that makes this very easy. It's very similar to react-app-rewired, but it supports CRA v2.

I've got everything working with Ant Design, Less, and Preact, and I've put together some example configuration files. modifyVars is an option for the Less loader that allows you customize the Ant Design theme. (Here is the documentation.)

craco Configuration Files:

• Ant Design + Less + modifyVars + Preact
• Ant Design + Less + modifyVars
• Less
• Preact

DISCLAIMER

These configuration files work great for create-react-app version 2.1.1. They will probably break at some point in the future. A new version of create-react-app might change something in the webpack config, or a new version of webpack might be completely different. They might move some things around in react-scripts. I've tried to add some detailed error messages so that you'll know if an update does something unexpected, but then you'll be on your own.

If something goes wrong, remember that you can always run yarn run eject and fully customize your webpack configuration.