rea-css-module modülü bulunamadı

Question

Tepkimede yeniyim ve basit bir uygulama oluşturmaya çalışıyorum. Stil-tepki-css-modülleri denemek için. İşe yaramıyor ve şu andan beri çözüm bulamıyorum. Webpack'i anlamak için ne kadar zamanım olduğunu ve nasıl çalıştığını düşünüyorum. Benzer bir gönderiyi buldum ama bana yardımcı olmadı (module not found). umarım birileri bana yardım edebilir.

Aşağıdaki şekilde stili denemeye çalışıyorum ve birkaç kırmızı hata ile beyaz bir sayfa görüyorum. En önemlisi, sanırım: "tepki-css-modülleri mevcut değil".

Ben yüklü:

bileşeni:

import React from 'react'; 
import CSSModules from 'react-css-modules'; 
var styles = require('./header.css'); 

class Header extends React.Component {enter code here 
    render(){ 
    return (
     <div className="header"> 
      <h1 styleName='mainTitle'>{this.props.info.username}</h1> 
     </div> 
    ); 
    } 
} 
export default CSSModules(Header, styles); 

CSS dosyası:

.mainTitle{ 
    color: #aa0; 
} 

npm install style-loader --save-dev 
npm install css-loader --save-dev 
npm install --save css-modulesify 

ben kolay okunmasını sağlamak için kod en kesti

package.json:

{ 
    "name": "Health Prover", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "node server" 
    }, 
    "keywords": [], 
    "author": "Massimo Pibiri", 
    "license": "ISC", 
    "dependencies": { 
    "css-modulesify": "^0.22.0", 
    "express": "^4.13.4", 
    "i": "^0.3.4", 
    "lodash": "^4.6.1", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.7.2", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "css-loader": "^0.23.1", 
    "react-hot-loader": "^1.3.0", 
    "style-loader": "^0.13.0", 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "engines": { 
    "node": "5.5.0" 
    } 
} 

webpack dosyası: Eğer yüklü aslında ise module not found olduğunu aldığımda

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
     'webpack-dev-server/client?http://127.0.0.1:8080/', 
     'webpack/hot/only-dev-server', 
     './src' 
    ], 
    output: { 
     path: path.join(__dirname, 'public'), 
     filename: 'bundle.js' 
    }, 
    resolve: { 
     modulesDirectories: ['node_modules', 'src'], 
     extensions: ['', '.js'] 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] 
     }, 
     { 
      test: /\.css$/, 
      loaders: [ 
       'style?sourceMap', 
       'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
      ] 
     } 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin() 
    ] 
}; 

Answer 1

ilk şey kontrol etmek. Paketin jsonuna bakarak, değil.

npm i react-css-modules --save

ve iyi.