web-dev-qa-db-fra.com

Comment utiliser les modules CSS avec create-react-app?

Selon un Tweet de Dan Abramov, le support des modules CSS est présent dans create-react-app (CRA). Il suffit de donner l'extension de module.css à ses feuilles de style pour activer la fonctionnalité, mais cela ne fonctionne pas avec moi. J'ai la version 1.1.4 de react-scripts. Comment puis-je activer les modules CSS avec CRA? Merci

reactjscreate-react-appcss-modules
23
Muhammad Saqib

Vous n'avez pas besoin d'éjecter.

Create-React-App prend en charge les modules CSS dès la version 2, qui est maintenant stable.

Mettre à niveau vers v2 (react-scripts@latest) en exécutant yarn upgrade react-scripts@latest.

Vous devez juste créer un fichier avec l'extension .module.css

Par exemple:

.myStyle {
  color: #fff
}

Ensuite, vous pouvez l'utiliser comme ceci:

import React from 'react'
import styles from 'mycssmodule.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>
72
Michael McQuade

Pour activer le module CSS dans votre application, vous n'avez pas besoin d'éjecter create-react-app. Vous pouvez suivre ces étapes simples décrites dans ce lien pour utiliser le module CSS dans votre projet.

Mais au cas où vous auriez éjecté votre create-react-app, vous devez trouver le fichier nommé

"webpack.config.js"

ouvrez ce fichier et trouvez ceci {test: cssRegex .... etc} dans la ligne no. 391 et remplacer à ceci change:

            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),
            },

Ouvrir le fichier .js et importer une déclaration comme celle-ci

import cssStyleClassName from './MyApp.css';

Ensuite, cette instruction d'importation vous permet d'effectuer les modifications suivantes dans les balises de composant, comme ceci:

<div className={cssStyleClassName.styleName}></div>

styleName correspond à ce que vous avez défini dans votre fichier MyAppStyle.css.

.styleName{
your properties here...
}

Après avoir éjecté votre application, vous devez redémarrer votre serveur local. Dans certains cas, les modifications ne sont pas prises en compte.

Remarque Dans la version précédente, deux fichiers étaient générés pour la production et dev séparément. Maintenant, dans la version actuelle, un fichier nommé "webpack.config.js" pour lequel vous devez vous préoccuper des modifications. Merci.

5
SachinVsSachin

Vous devez éjecter create-react-app, puis dans les fichiers de configuration pour Webpack, vous ajoutez ces 2 lignes enter image description here

Et pour l'utiliser, chargez css sur Composant vous ne voulez pas (je keed composant et css dans le même dossier)

import classes from './SomeComponentStyle.css';

...

<div className={classes.RedDiv}>

à l'intérieur de SomeComponentStyle.css

.RedDiv {
  /* styles for red div */
}
0
ivica.moke