CODEWITHSUNDEEP
cssreactjslesscreate-react-app
Deep Patel
Deep Patel

Reputation: 321

How to use LESS preprocessor in React Create-React-APP

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;
}

Upvotes: 10

Views: 14591

Answers (4)

Marko Kn&#246;bl
Marko Kn&#246;bl

Reputation: 512

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'),
    },
  ],
};

Upvotes: 2

Ihar
Ihar

Reputation: 1

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.

Upvotes: -1

Fawaz
Fawaz

Reputation: 3560

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:

https://github.com/kitze/custom-react-scripts

https://github.com/fawaz-ahmed/fawaz-ahmed.github.io

Upvotes: 1

Inanda Menezes
Inanda Menezes

Reputation: 1804

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

Upvotes: 5

Related Questions