Add support for LESS stylesheets

[hbj]

Resolves #10336

Changes done has been mainly deduced from the current implementation for SASS support. These include:

• Add opt-in support for LESS and LESS modules to webpack config in react-scripts with the possibility to pass options to less-loader through a predefined file in the app root folder
• Add documentation
• Add LESS support utils to react-dev-utils
• Add tests to kitchensink test suite

Test plan:

• Manually test the end-to-end flow as described in the contribution document. The following features have been tested:
  • Loading of local LESS stylesheets
  • Loading of LESS stylesheets from node_modules
  • Loading of local LESS modules
  • Generated CSS identifier of LESS modules (for index and non-index files)
  • Helper error message output if less hasn't been installed
• Added unit tests and made sure they pass by running the corresponding test suites (yarn e2e:docker --test-suite <test suite>). Tests that are not passing don't seem to be related to this PR.

NOTE: The documentation contains a hint that the feature is available with react-scripts@4.1.0 and higher. I included this temporarily as I don't know in which version this would be included, so this has to be updated once the information becomes available.

[SimonChaumet]

When testing in manual mode (pull + pack + resolutions) my less files are not built. Any idea why ?

[SimonChaumet]

I found why it didn't work : due to the version being under the current remote version it didn't take the local resolution.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[mrmckeb]

Hi @hbj, the team have considered Less support in the past, but with Sass support already included we feel this covers enough use cases.

Was there something particular you needed from Less that you can't get from Sass?

[mxcl]

Ant-Design is a very popular React based UI framework, it uses LESS (unfortunately). Currently in my project I use a separate step compiling their LESS templates with my own modifications to make something that can be ingested by CRA.

Thus I have been watching and waiting on this PR.

Anyway, just adding this so you have some data. If you don’t merge I get it, maintenance is a bitch.

[hbj]

Hi @hbj, the team have considered Less support in the past, but with Sass support already included we feel this covers enough use cases.

Was there something particular you needed from Less that you can't get from Sass?

Hi @mrmckeb, as @mxcl said, Ant Design was the main reason why we need Less support. We use Ant Design in different projects and we integrate it in a way that we have access to the Less variables and that we can customise the theme, but to do it we must always use some tool like 'cra-rewrite' which has its own compatibility issues with the latest versions of CRA.

[3imed-jaberi]

Hi guys, I would to share a safe solution which it's not based on any dependency like react-app-rewired ..

1. Use CRA

yarn create react-app 

2. Add these deps

yarn add less less-watch-compiler concurrently -D

3. create less-watcher.config.json file then add these config (config-docs)

{
  "watchFolder": "src/",
  "outputFolder": "src/",
  "sourceMap": true,
  "runOnce": false,
  "enableJs": true
}

4. change the start scritpt in package.json

...
"scripts": {
    "start": "concurrently --kill-others \"less-watch-compiler --config less-watcher.config.json\" \"react-scripts start\"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...

This solution was originally provided by @joefstack in his blog post here.

[hbj]

Thanks @3imed-jaberi for the suggestion. I generally prefer to have all tasks handled directly by react scripts, but this looks interesting and better than trying to mess with the Webpack configuration (e.g. with 'cra-rewrite').

Regarding the npm scripts update, I think you must also add a compilation step of the LESS files before running react scripts for the 'build' and 'test' scripts, otherwise you might find yourself working with outdated CSS files.

[tommie-lie]

@hbj if you want to have all tasks handled by react-scripts directly (and don't wan't the additional dependency of concurrently and less-watch-compiler) you can try this: https://github.com/tommie-lie/cra-antd-customization#tldr

[hbj]

Thanks @tommie-lie, this looks awesome!

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.