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

Instagramと同じように、CSSモジュールをReactプロジェクトに追加したい react-css-modules.

しかし、2 つの問題を見つけます。

1: css-module を部分的に使用できますか? すべての子ノードはHomePageContainer-home-page-wrap-Ql_jWcss スタイルを失い、home-page-wrap-normal.

プロジェクト全体で className を sytleName に置き換える必要があるようです。styleName と className を両方とも正しい css スタイルで使用する場所を選択できる方法はありますか。

2:開発モデルで sourceMap を開くことはできますか? base64 のクラスを読み取ることができません。元のクラス名とコンパイル済みのクラス名を接続する sourceMap が必要です。

4

1 に答える 1