I want to use LESS preprocessor in my create-react-app.
React Code
ReactDOM.render(
<form>
<input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/" required title="Please enter value" required="required"/>
<input type="submit"/>
</form>
,document.getElementById('root'))
index.less
body{
background: red;
}
Here is the way I am doing it
You should use node-sass-chokidar npm package:
npm install node-sass-chokidar --save-dev
Then add the following to your npm scripts in package.json :
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
The watcher will find every Sass file in src subdirectories, and create a corresponding CSS file next to it.
Remember to remove all css files from the source control and add src/**/*.css to your .gitignore.
Finally you might want to run watch-css automatically with npm start, and run build-css as a part of npm run build . For it, install the following npm package in order to be able to execute two scripts sequentially:
npm install --save-dev npm-run-all
Then change your npm start and build scripts in package.json file to the following:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
See this link for further information: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc
With create-react-app 2 you can use "Create React App Configuration Override" (craco) and craco-less to configure this:
set up craco:
npm install @craco/craco
in package.json:
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
setting up craco for less:
npm install craco-less
create new file: craco.config.js
module.exports = {
plugins: [
{
plugin: require('craco-less'),
},
],
};
The simplest and painless way to add less support with reactjs app by far is to use custom-react-scripts with create-react-app for LESS/SASS/decorators support :
Install: npm install -g create-react-app custom-react-scripts
Create app:
create-react-app <app_name> —scripts-version custom-react-scripts
Example less file:
.myDiv{ background: gray; }
and then in your component:
import lessStyles from '<less file path>';
<div style={lessStyles.myDiv}>
...
</div>
or the regular way:
import '<less file path>';
<div className="myDiv">
...
</div>
For reference:
I've had a similar problem. Just include the following lines into your webpack configuration rules section (taken from the official less loader examples):
{
test: /\.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
},
Of course, you need to add respective packages into your package.json
And then in you code simply import needed styles
import './style.less'
Using such approach you won't introduce an extra step of creating additional css files.
