0

不知道我在这里做错了什么，在哪里我 console.log(style) 它只是一个空白对象，但已定义。没有错误。

Login.js - 组件

import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import CSSModules from 'react-css-modules';
import { Row, Col } from 'antd';

import styles from './Login.css';

import Logo from '../../components/Logo/Logo';

class Login extends Component {
  constructor (props) {
    super(props);
  }

  render () {
    const {dispatch} = this.props
    console.log(styles);
    return (
      <Row type="flex" justify="space-around" align="middle" className="container">
        <Col sm={16} md={16} lg={9}>
            <div className={styles.content}>
              <h1>Sign In</h1>
              <Logo size="large" className="logo" />
            </div>
        </Col>
      </Row>
    )
  }

}

Login.propTypes = {
  data: PropTypes.object,
  history: PropTypes.object,
  dispatch: PropTypes.func
}

function select (state) {
  return {
    data: state
  }
}

export default connect(select)(CSSModules(Login, styles));

Login.css - 这里没什么特别的

body {
  background-color: #f0f0f0;
}

.container {
  width: 100vw;
  height: 100vh;
}

.content {
  position: relative;
  background-color: #ffffff;
  padding: 30px 20px 20px 20px;
}

和 webpack.config.js 很可能是罪魁祸首，但我似乎无法找出问题所在

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  devServer: {
    historyApiFallback: true,
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
         fallback: "style-loader",
         use: "css-loader"
       })
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }, {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  },
  plugins: [
    HtmlWebpackPluginConfig,
    new ExtractTextPlugin({filename: 'style.css'})
  ]
}

该应用程序编译并运行良好，只是 react-css-module 没有对样式进行命名空间，并且样式没有应用于元素。

4

2 回答 2

0

我有同样的问题。添加后它开始工作

模块=真

在 webpack.config.js 中如下。

module:{
 rules:
 [
    {
        test:/\.css$/,
        loader:'style-loader!css-loader?modules=true'
    }
 ]
}
于 2019-05-25T18:15:08.080 回答
0

似乎您在 css-loader: 中缺少为 css-loader
modules: true启用 CSSModules 规范。

检查文档。

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: "css-loader?modules"
}
于 2018-06-07T10:26:56.393 回答