样式不适用于 react-css-modules答案

【问题标题】：Styles don't apply using react-css-modules样式不适用于 react-css-modules
【发布时间】：2017-01-24 06:10:56
【问题描述】：

一切看起来都很好，没有错误，但是页面上的元素仍然没有样式。

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

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

正如您在图片中看到的那样，生成了类并应用于元素，但页面上没有显示任何内容。 image

【问题讨论】：

您对此有什么解决方案吗？我也面临同样的问题。

标签： css reactjs webpack react-css-modules

【解决方案1】：

在 react-css-modules 中，您使用 styleName 而不是 className：

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

【讨论】：

是的，我已经试过了，可惜没用
当你做console.log(styles)时你会得到什么？
我得到一个对象：Object {mapContainer: Layout__mapContainer___3yH5h", header: "Layout__header___2kJ4F"}
如果没有 extractTextPlugin 也能工作吗？如果它在没有插件的情况下也能工作，这意味着你没有在你的 html 文件中包含对 app.css 的引用。
添加了编译后的css文件。这是我的 html 中的参考：<link rel="stylesheet" href="app.css">。此外，如果没有 extractTextPlugin，它也无法工作，并且在控制台中会显示错误：GET http://localhost:8080/app.css。问题可能是css文件的错误路径吗？我尝试用不同的方式改变它，但无法弄清楚。

【解决方案2】：

我遇到了同样的问题.. 我的问题是我没有在我的 .html 文件中包含生成的 css 样式表。

没有样式表

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

【讨论】：

【解决方案3】：

您需要添加前缀“模块”，例如：

import styles from './Layout.module.css';

【讨论】：