【问题标题】:react-css-module module not found未找到 react-css-module 模块
【发布时间】:2016-07-07 05:52:06
【问题描述】:

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

我尝试按以下方式设置样式,但我得到一个带有几个红色错误的白页。最重要的是,我猜:“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;
}

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

【问题讨论】:

  • 使用npm i react-css-modules --save安装包react-css-modules

标签: javascript css reactjs


【解决方案1】:

当您收到module not found 时首先要检查的是它是否确实已安装。从你的包json来看,不是。

npm i react-css-modules --save

还有你的好。

【讨论】:

    猜你喜欢
    • 2019-05-10
    • 2022-08-05
    • 2021-10-07
    • 2014-11-23
    • 1970-01-01
    • 2011-09-18
    • 2018-05-23
    • 2022-01-02
    • 2018-08-05
    相关资源
    最近更新 更多