react-css-module module not found

react-css-module module not found

本文关键字:found not module react-css-module      更新时间:2023-09-26

我是 react 的新手,我正在尝试构建一个简单的应用程序。我尝试 react-css-modules 来设置它的样式。它不起作用,而且由于现在时间太长,我找不到解决方案。我想我很难理解 webpack 以及它是如何工作的......我找到了这个类似的帖子,但它对我没有帮助(找不到模块)。我希望有人可以帮助我。

我尝试按以下方式设置样式,结果得到一个带有几个红色错误的白页。最重要的是,我想:"react-css-modules 不存在"。

我安装了:

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

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

当你得到module not found时,首先要检查的是它是否真的已安装。从您的包 json 来看,事实并非如此。

npm i react-css-modules --save

和你的好。