Wie verwende ich weniger Präprozessor in React Create-React-APP

Question

Ich möchte LESS Präprozessor in meiner create-react-app verwenden.

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

Answer 1

Hier ist die Art, wie ich es tue

Sie sollten Knoten-Sass-chokidar npm Paket verwenden:

npm install node-sass-chokidar --save-dev 

Dann Fügen Sie den folgenden npm-Skripten in package.json Folgendes hinzu:

"build-css": "node-sass-chokidar src/ -o src/", 
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive" 

Der Watcher findet jede Sass-Datei in src-Unterverzeichnissen und erstellt daneben eine entsprechende CSS-Datei.

Denken Sie daran, alle CSS-Dateien aus der Quellcodeverwaltung zu entfernen und src/**/*. Css zu Ihrem .gitignore hinzuzufügen.

Schließlich möchten Sie watch-css automatisch mit npm start ausführen und Build-CSS als Teil von npm run build ausführen. Denn es ist, installieren Sie das folgende npm Paket um zwei Skripte auszuführen sequentiell zu:

npm install --save-dev npm-run-all 

Dann wird Ihr npm Start ändern und Skripte in package.json Datei in den folgenden Aufbau:

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

siehe diesen Link für weitere Informationen: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

Answer 2

Die einfachste und schmerzlos weniger Unterstützung mit reactjs App hinzuzufügen ist bei weitem custom-react-scripts mit create-react-app für LESS/SASS/Dekorateure benutzen unterstützen:

Install: npm install -g create-react-app custom-react-scripts

erstellen App: create-react-app <app_name> —scripts-version custom-react-scripts

Beispiel weniger Datei:

.myDiv{ background: gray; } 

und dann in Ihrer Komponente:

import lessStyles from '<less file path>'; 

<div style={lessStyles.myDiv}> 
    ... 
</div> 

oder der reguläre Weg:

import '<less file path>'; 

<div className="myDiv"> 
    ... 
</div> 

Zum Vergleich:

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

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