How do I include React Project in my project?
First, I am using a pre-built React build: https://github.com/facebookincubator/create-react-app#create-react-app-
So far, that's fine. I am trying to connect LESS to my application. I followed the instructions below: 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 that I really understand. The example has a Webpack config file, but the original build from FB does not. So I'm not really sure what I need to do to add less to my project.
For example, the original assembly has import './App.css';
App.js in the file, however should I make this "App.less" work with less or do I need some kind of require?
Please list all files that need to exist / be edited so that I can do this.
(I think I'll try to start with CSS, since that already works and then carries over to a later one ...) But I need to work with Less for my job, and so I'd be pleased to start with that.
PS It would be helpful for me to understand how the files should look in their simplest form.
Aka: index.html - Is there some kind of structure located here, or should it all be written as JSX in my App.js file?
source to share
I just had to do it myself. Following the instructions in the create-web-app documentation . Modified using package node-less-chokidar
seems to work fine.
My package.json build commands afterwards looks 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
source to share
Adding to @Shammoo's answer.
- You need to install
yarn add node-less-chokidar
andyarn add npm-run-all
, or if you are using NPM,npm i node-less-chokidar
andnpm i npm-run-all
. - Add to .gitignore file with @Shammoo answer:
src/**/*.css src/**/*.map
- Add scripts.
My scripts are a bit different as I didn't throw 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"
- css file to import into a component:
import './index.css';
. You can do .css because scripts convert fewer files to css. - Use less! import files:,
@import "./logo.less";
insert nested CSS, etc.
source to share