反応:
/**
* 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_jW
css スタイルを失い、home-page-wrap-normal
.
プロジェクト全体で className を sytleName に置き換える必要があるようです。styleName と className を両方とも正しい css スタイルで使用する場所を選択できる方法はありますか。
2:開発モデルで sourceMap を開くことはできますか? base64 のクラスを読み取ることができません。元のクラス名とコンパイル済みのクラス名を接続する sourceMap が必要です。