使用带有反应的css模块？

Posted 2023-02-21

【中文标题】使用带有反应的css模块？

【英文标题】：using css-module with react?

【发布时间】：2017-04-27 05:41:09

【问题描述】：

反应：

/**
 * 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也是一样。

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

2：我可以在开发模式中开源地图吗？ base64 的类不可读，我需要一个 sourceMap 连接原始类名和编译后的类名。

【参考方案1】：

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

请看这个： CSS Modules - exclude class from being transformed

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

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