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

The doom node :

The css style:

The webpack.config:

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

I want to add css modules into my React project just like instagram with react-css-modules .

But find 2 problems:

1: Can I partly using css-module? The child nodes of HomePageContainer-home-page-wrap-Ql_jW all lose css style, and the same with home-page-wrap-normal .

It seems that I should replace the className with sytleName in the whole project. Is there any way that I can chose where use styleName and className with both showing the correct css style.

2:Can I open sourceMap in develop model? The class with base64 is unreadable, I need a sourceMap connecting original class name with compiled class name.

Answer 1

To answer your first question, you can use :global inside your css/less file in order to load the style as normal css.

Please see this: CSS Modules - exclude class from being transformed

To answer your second question, your class name in source map should be readable enough. You can change the following to make it even more readable:

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