在react中使用css-module？

Question

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项目中，就像使用react-css-modules的instagram一样。

但是找到两个问题：

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]