用css-module做出反应？

Question

The React：

/**
 * 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与react-css-modules。

但找到2个问题：

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

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

2：我可以在开发模型中打开sourceMap吗？ 使用base64的类是不可读的，我需要一个sourceMap连接原始类名和已编译的类名。

Answer 1

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

请参阅以下内容： CSS Modules - exclude class from being transformed

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

localIdentName=[name]___[local]___[hash:base64:4]