CODEWITHSUNDEEP
reactjsconfigurationless
April
April

Reputation: 87

How do I incorporate .less into a React Project?

First off, I am using the pre-made React build from: https://github.com/facebookincubator/create-react-app#create-react-app-

So far it is fine. I am attempting to connect LESS to the app. I have followed the instructions here: http://jamesknelson.com/webpack-made-simple-build-es6-less-with-autorefresh-in-26-lines/

However I am new to this and there are too many new files for me to really understand. The example has a Webpack Config file, but the original build from FB does not. Therefore I am not exactly sure what I need to do to add the less into my project.

For instance, the original build has import './App.css'; in the App.js file, however should I make this "App.less" to work with less or do I need some kind of require statement?

Please list all of the files that need to exist / be edited in order for me to achieve this.

(I think I am going to try to start with CSS, since that already works, and then transfer to less later...) But I need to work with Less for my work and so I would enjoy getting started with that.

P.S. It would actually be helpful for me to understand how the files should look in their simplest form.

Aka: index.html - Is some structure located here, or should it all be written as JSX within my App.js file?

Upvotes: 4

Views: 4554

Answers (2)

Craig1123
Craig1123

Reputation: 1560

Adding on to @Shammoo's answer.

  1. You need to install yarn add node-less-chokidar and yarn add npm-run-all or if you're using NPM, npm i node-less-chokidar and npm i npm-run-all.
  2. Add to the .gitignore file with @Shammoo's answer: src/**/*.css src/**/*.map
  3. Add scripts.

My scripts are a little different since I have not ejected from Create-react-app:

  "start": "npm run build-css && run-p -ncr watch-css start-js",
  "start-js": "react-scripts start",

  "build": "run-s -n build-css build-js",
  "build-js": "react-scripts build",

  "test": "run-s -n build-css test-js",
  "test-js": "react-scripts test --env=jsdom",

  "build-css": "node-less-chokidar src",
  "watch-css": "node-less-chokidar src --watch"
  1. import css file into component: import './index.css';. You can do .css because the scripts convert the less files into css.
  2. Use Less! import files: @import "./logo.less";, make nested CSS, etc

Upvotes: 4

Shammoo
Shammoo

Reputation: 1103

I just had to do this myself. Following the instructions in the create-web-app documentation. Modified using node-less-chokidar package seems to be working fine.

My package.json build commands afterwards look like

"build-css": "node-less-chokidar src/ src/",
"watch-css": "node-less-chokidar src/ src/ --watch",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && node scripts/build.js",

I had to add to my .gitignore

# css preprocessing
src/**/*.css
src/**/*.map

Upvotes: 4

Related Questions