4

すべて問題ないようで、エラーはありませんが、ページの要素はまだスタイル設定されていません。

webpack.config.js

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
},


plugins: [
  new ExtractTextPlugin('app.css', {
    allChunks: true
  }),
],

Layout.js

import React, { Component } from 'react';
import InteractiveMap from './InteractiveMap';
import Header from './header';
import Navigation from './navigation';
import CSSModules from 'react-css-modules';
import styles from './Layout.css';

class Layout extends Component {
  render() {
    return (
      <div>
        <div className={styles.mapContainer}>
         <InteractiveMap /> 
       </div>
       <div>
         <Header className={styles.header}>
            <Navigation menuItems={menuItems}/>
         </Header>
        </div>
      </div>
    );
  }
}

export default CSSModules(Layout, styles);

レイアウト.css

//testing

.mapContainer: {
    padding: 0;
    background-color: black;
    height: 100%;
    color: yellow;
}

.header {
    color: yellow;
    background-color: blue;
}

コンパイルされた app.css

.Layout__mapContainer___3yH5h: {
  padding: 0;
  background-color: black;
  height: 100%;
  color: yellow;
}

.Layout__header___2kJ4F {
    color: yellow;
    background-color: blue;
}

図でわかるように、クラスが生成され、要素に適用されますが、ページには何も表示されていません。 画像

4

3 に答える 3

1

react-css-modulesでは、className の代わりにstyleNameを使用します。

<div styleName="container">

これはうまくいくはずです：

class Layout extends Component {
  render() {
    return (
      <div>
        <div styleName="mapContainer">
         <InteractiveMap /> 
       </div>
       <div>
         <Header styleName="header">
            <Navigation menuItems={menuItems}/>
         </Header>
        </div>
      </div>
    );
  }
}
于 2016-09-16T06:18:12.483 に答える
0

私は同じ問題を抱えていました..私の問題は、生成されたcssスタイルシートを.htmlファイルに含めなかったことです。

スタイルシートなし

<html>
<head>
</head>

<body>
    <div id = "hero"> </div>
    <script type="text/javascript" src="bundle.js"></script>
</body>

スタイルシートで (修正)

<html>
<head>
     <link rel='stylesheet' href='app.css'>
</head>

<body>
    <div id = "hero"> </div>
    <script type="text/javascript" src="bundle.js"></script>
</body>

于 2018-07-22T22:17:45.300 に答える