web-dev-qa-db-fra.com

Comment utiliser le préprocesseur LESS dans React Create-React-APP

Je souhaite utiliser le préprocesseur LESS dans mon application créer-réagir.

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;
}
cssreactjslesscreate-react-app
7
Deep Patel

Voici comment je le fais

Vous devriez utiliser le paquet npm node-sass-chokidar:

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

Ajoutez ensuite les éléments suivants à vos scripts npm dans package.json:

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

L’observateur trouvera tous les fichiers Sass dans les sous-répertoires src et créera un fichier CSS correspondant à côté.

N'oubliez pas de supprimer tous les fichiers css du contrôle source et d'ajouter src/**/*. Css à votre fichier .gitignore.

Enfin, vous voudrez peut-être exécuter watch-css automatiquement avec npm start et exécuter build-css dans le cadre de npm run build. Pour cela, installez le paquet npm suivant afin de pouvoir exécuter deux scripts séquentiellement:

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

Modifiez ensuite les scripts de démarrage et de génération de npm dans le fichier package.json comme suit:

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

Voir ce lien pour plus d'informations: 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

Le moyen le plus simple et le plus simple d’ajouter de moins en moins de soutien avec l’application reactjs consiste à utiliser custom-react-scripts avec create-react-app pour le support LESS/SASS/decorators:

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

Créer une application: create-react-app <app_name> —scripts-version custom-react-scripts

Exemple moins de fichier:

.myDiv{ background: gray; }

puis dans votre composant:

import lessStyles from '<less file path>';

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

ou la manière habituelle:

import '<less file path>';

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

Pour référence:

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

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

1
Fawaz

J'ai eu un problème similaire… .. Il suffit d'inclure les lignes suivantes dans la section des règles de configuration de votre webpack ( tirées des exemples officiels moins de loader ):

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

Bien sûr, vous devez ajouter les packages respectifs dans votre package.json

Et puis, dans votre code, importez simplement les styles nécessaires

import './style.less'

En utilisant une telle approche, vous ne créerez pas d’étape supplémentaire de création de fichiers CSS supplémentaires.

0
Ihar