Question

我有新的反应，我正在尝试构建一个简单的应用程序。我尝试使用react-css-modules来设计它。它不起作用，而且从现在开始太多时间我都找不到解决方案。我想我很难理解webpack以及它是如何工作的......我发现了这个类似的帖子，但它并没有帮助我（module not found）。我希望有人可以帮助我。

我尝试以下列方式设置样式，并且我得到一个包含多个红色错误的白页。最重要的是，我猜：＆＃34; react-css-modules不存在＆＃34;。

我安装了：

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

我剪切了大部分代码以便于阅读：

组件：

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

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

Answer 1

当你获得module not found时，要检查的第一件事是它是否实际安装。根据你的包json判断，它不是。

npm i react-css-modules --save

和你的好。

找不到react-css-module模块

1 个答案: