webentwicklung-frage-antwort-db.com.de

So verwenden Sie den LESS-Präprozessor in der React Create-React-APP

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="/\[email protected]\S+\.\S+/" required title="Please enter value" required="required"/>
        <input type="submit"/>      
    </form>
    ,document.getElementById('root'))

index.less

body{
  background: red;
}
cssreactjslesscreate-react-app
7
Deep Patel

So mache ich es

Sie sollten das npm-Paket node-sass-chokidar verwenden:

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

Fügen Sie dann zu Ihren npm-Skripts 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 und build-css als Teil von npm run build ausführen. Installieren Sie dazu das folgende npm-Paket, um zwei Skripts nacheinander ausführen zu können:

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

Ändern Sie dann den npm-Start und erstellen Sie Skripts in der package.json-Datei wie folgt:

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

Weitere Informationen finden Sie unter diesem Link: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass -less-etc

2
Inanda Menezes

Der einfachste und schmerzloseste Weg, um weniger Unterstützung mit der reacts-App hinzuzufügen, ist die Verwendung von custom-react-scripts mit create-react-app für die Unterstützung von LESS/SASS/decorators:

Installieren Sie: npm install -g create-react-app custom-react-scripts

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

Beispiel weniger Datei:

.myDiv{ background: gray; }

und dann in deiner Komponente:

import lessStyles from '<less file path>';

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

oder die normale Weise:

import '<less file path>';

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

Als Referenz:

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

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

1
Fawaz

Ich hatte ein ähnliches Problem ..__ Fügen Sie einfach die folgenden Zeilen in den Abschnitt mit den Webpack-Konfigurationsregeln ein ( entnommen aus den offiziellen less loader-Beispielen ):

  {
    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
    }]
  },

Natürlich müssen Sie der package.json entsprechende Pakete hinzufügen

Und dann importieren Sie einfach die benötigten Stile in Ihren Code

import './style.less'

Mit einem solchen Ansatz werden Sie keinen zusätzlichen Schritt zum Erstellen zusätzlicher CSS-Dateien einführen.

0
Ihar

Mit der create-react-app 2 können Sie dies mit "Create React App Configuration Override" (craco) und craco-less konfigurieren:

craco einrichten:

npm install @craco/craco

in package.json:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

craco für weniger einrichten:

npm install craco-less

neue Datei erstellen: craco.config.js

module.exports = {
  plugins: [
    {
      plugin: require('craco-less'),
    },
  ],
};
0
Marko Knöbl