create-react-app 에서 css modules 의 예제 코드 를 사용 합 니 다.

머리말
만약 에 우리 가 0 부터 webpack+es6 로 react 개발 전단 응용 을 결합 하면 각종 webpack 설정 에서 많은 정력 을 소모 할 것 입 니 다.그래서 각종 비계 가 생 겼 습 니 다.create-react-app 이 그 중의 하나 입 니 다.
css modules 에 대해 서 는 react 에서 예상 치 못 한 스타일 규칙 이 서로 덮어 쓰 거나 다른 기능 을 실현 하 는 것 을 피 합 니 다.
팝 업 프로필 설정
create-react-app 을 직접 사용 하여 프로젝트 를 만 들 면 모든 프로필 이 숨겨 지고 전체 디 렉 터 리 가 이렇게 됩 니 다.
 
따라서 첫 번 째 단 계 는 모든 프로필 을 팝 업 하고 루트 디 렉 터 리 에서 다음 코드 를 실행 하 는 것 입 니 다.

npm run eject

팝 업 된 파일 디 렉 터 리 는 이렇게 합 니 다.
 
script 과 config 두 개의 폴 더 가 추가 되 었 습 니 다.
관련 파일 설정
config 폴 더 열기
 
웹 팩.config.dev.js 를 설정 해 야 합 니 다.프로젝트 를 압축 하여 출력 하려 면 웹 팩.config.prod.js 를 설정 해 야 합 니 다.그러나 두 파일 설정 방법 은 같 습 니 다.웹 팩.config.dev.js 를 예 로 들 면.
css-loader 를 검색 하여 이 코드 를 찾 습 니 다.
 
css modules 가 설정 되 어 있 지 않 으 면 options 에 modules 옵션 이 없습니다.설정 하면 됩 니 다.
쓰다
우 리 는 todo 프로젝트 의 list 구성 요 소 를 예 로 들 어 react 에서 css modules 를 사용 하 는 것 을 간단하게 소개 합 니 다.이 list 구성 요 소 는 ul 이 할 일 을 열거 하 는 것 입 니 다.효 과 는 다음 과 같 습 니 다.
 
식사,깨 진 잠 은 list 구성 요소 의 전시 입 니 다.
먼저 css 가 어떻게 쓰 는 지 보 겠 습 니 다.아주 짧 은 코드 는 다음 과 같 습 니 다.

.theList{
  list-style: none;
  padding-left: 0;
  width: 255px;
}

.theList li{
  color: #333;
  background: rgba(255,255,255,0.5);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  cursor: pointer;
}

파일 이름 은 TodoItem.css 입 니 다.
jsx 파일 은 다음 과 같 습 니 다.

import React from 'react';
import styles from './TodoItem.css';

class TodoItem extends React.Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){
    this.props.onDelete(e.target.getAttribute('name'));
  }

  render(){
    let todoEntries = this.props.entries;
    return (
      <!--      -->
      <ul className={styles.theList}>
        {todoEntries.map((item)=>{
          return (
            <li key={item.key} onClick={this.handleChange} name={item.key}>{item.text}</li>
          )
        })}
      </ul>
    )
  }
}

export default TodoItem;

이렇게 해서 우 리 는 콘 솔 에서 살 펴 보 았 다.
 
 
 
관련 className 은 해시 문자열 로 컴 파일 되 었 으 며,파일 마다 해시 문자열 을 도입 하 는 것 은 같 지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.