1
votes

Activer le module css dans react 16.7

J'apprends des vidéos à la recherche de réactions, mais dans une vidéo, ils activent le module css en éjectant> éditer webpack.config.dev.js mais je ne trouve pas le même fichier dans ma réaction, plus tard, j'ai appris que dans 16.7 c'est différent, alors n'importe qui peut-il dire les étapes pour activer le module css dans react 16.7

javascript reactjs

2 commentaires

C'est une configuration Webpack, donc peu importe la version de réaction que vous avez. Après l'éjection, recherchez dans les sous-répertoires de votre projet des fichiers nommés comme webpack * .js

J'en ai trouvé un mais en cela il y a aussi une structure différente, alors où ajouter des modules: true, LocalIdentName: etc.

3 Réponses :

2
votes

Pour activer le module CSS, tout d'abord allez dans le répertoire de votre projet puis ouvrez la ligne de commande et exécutez npm run eject

dans le dossier de configuration, vous trouverez webpack.config.dev .js et webpack.config.prod.js files.open ces fichiers

et ajoutez ce code à webpack.config.dev.js code>

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

et dans filewebpack.config.prod.js ajouter

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

Après en enregistrant ceci, vous pouvez maintenant utiliser le module CSS

1 commentaires

ok j'ai trouvé le premier mais pas le second c'est-à-dire config.prod.js, mais cela m'a aidé merci

4
votes

heureusement dans react 16.8 pas besoin d'exécuter "npm run eject" et vous pouvez simplement ajouter une extension ".module.css" à la place de ".css" pour profiter du module CSS

0 commentaires

0
votes

For react version 16.13
In webpack.config.js file find this keyword 'css-loader'.
You will find below code in line number 82 for react version-16.13
{
   loader: require.resolve('css-loader'),
   options: cssOptions,      
}

Replace above object with 

{
   loader: require.resolve('css-loader'),
   options: {
      modules: {
        mode: "local",
        localIdentName: "[name]_[local]_[hash:base64:5]"
      },
      import: true,
      importLoaders: true
    }     
}

Start the server again by npm start(If changes are not reflected)

0 commentaires