1

反应：

/**
 * Created by pingfengafei on 16/11/28.
 */
import React from 'react';
import HeaderContainer from './HeaderContainer';
import NavContainer from './NavContainer';
import ContentContainer from './ContentContainer';

import CSSModules from 'react-css-modules';
import styles from  './HomePageContainer.less';

class HomePageContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="home-page-wrap-normal" styleName='home-page-wrap'>
        <HeaderContainer />
        <NavContainer />
        <ContentContainer>
          {this.props.children}
        </ContentContainer>
      </div>

    );
  }

}

export default CSSModules(HomePageContainer, styles, {allowMultiple: true});

厄运节点： 在此处输入图像描述

CSS样式：

在此处输入图像描述

webpack.config：

{
    test: /\.(le|c)ss$/,
    loader: "style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!postcss!less"
}

我想将 css 模块添加到我的 React 项目中，就像 instagram with react-css-modules.

但是发现2个问题：

1：我可以部分使用css-module吗？所有的子节点HomePageContainer-home-page-wrap-Ql_jW都失去了css样式，同理home-page-wrap-normal。

看来我应该在整个项目中将className替换为sytleName。有什么方法可以选择使用 styleName 和 className 并显示正确的 css 样式。

2：我可以在开发模式中开源地图吗？base64 的类不可读，我需要一个 sourceMap 将原始类名与编译后的类名连接起来。

4

1 回答 1

0

要回答您的第一个问题，您可以:global在 css/less 文件中使用，以便像普通 css 一样加载样式。

请参阅： CSS 模块 - 将类排除在转换之外

要回答您的第二个问题，源映射中的类名应该足够可读。您可以更改以下内容以使其更具可读性：

localIdentName=[name]___[local]___[hash:base64:4]
于 2018-10-05T19:20:39.853 回答