2016-03-20 22 views
0

私は反応が新しく、単純なアプリケーションを構築しようとしています。私はそれをスタイルするためにreact-css-modulesを試しています。それはうまくいきません。私は今、多くの時間を過ごして以来、解決策を見つけられません。私はwebpackを理解するのは難しいと思うし、それがどのように働くのかと思う。私はこの類似のポストを見つけたが、それは私を助けなかった(module not found)。私は誰かが私を助けることを願っています。react-css-moduleモジュールが見つかりません

私は次のようにスタイルをとろうとしますが、いくつかの赤いエラーがある白いページが表示されます。最も重要なのは、私は次のように推測します。「react-css-modulesは存在しません」

は、私がインストールさ:

コンポーネント:

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ファイル:

.mainTitle{ 
    color: #aa0; 
} 

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

が、私はそれが簡単に読むことを作るために、コードの大部分をカット

the 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のファイル:それは実際にはインストールされている場合

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() 
    ] 
}; 

答えて

0

あなたがmodule not foundを取得するときに最初に確認することです。あなたのパッケージjsonで判断すると、そうではありません。

npm i react-css-modules --save

とあなたの良いです。

関連する問題