create-react-app에서 css 모듈을 사용하는 방법

create-react-app에서 css 모듈을 사용하는 방법

Dan Abramov의 트윗에 따르면 CSS 모듈은 Create-React-App(CRA)에서 지원됩니다.의 연장만 하면 된다.module.css이 기능을 활성화하기 위해 스타일시트로 이동하지만 저는 이 기능을 사용할 수 없습니다. 1..react-scriptsCRA를 사용하여 css 모듈을 활성화하려면 어떻게 해야 합니까?합니다.

이젝트할 필요가 없습니다.

Create React App은 버전 2에서 개봉 즉시 CSS 모듈을 지원합니다.

최신()react-scripts@latest 버전으로 업그레이드하십시오.

실을 사용하는 경우:

yarn upgrade react-scripts@latest

npm을 사용하는 경우:

npm install --save react-scripts@latest

다음 가 '있다'인 ..module.css

예를 들어 다음과 같습니다.

.myStyle {
  color: #fff
}

그런 다음 다음과 같이 사용할 수 있습니다.

import React from 'react'
import styles from './mycssmodule.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>

CSS 모듈을 앱에서 활성화하기 위해 create-react-app을 꺼낼 필요가 없습니다.프로젝트에서 CSS 모듈을 사용하려면 이 링크에서 설명하는 간단한 절차를 수행합니다.

단, create-react-app을 이젝트한 경우 다음 파일을 찾을 필요가 있습니다.

"webpack.config.config.config"

이 파일을 열고 행 번호 391에서 다음 {test:cssRegex....etc}을(를) 찾은 후 다음 변경 내용으로 대체합니다.

            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),
            },

.js 파일 및 Import 스테이트먼트를 다음과 같이 엽니다.

import cssStyleClassName from './MyApp.css';

이 Import 스테이트먼트를 사용하면 컴포넌트 태그에서 다음과 같은 변경을 할 수 있습니다.

<div className={cssStyleClassName.styleName}></div>

styleName은 MyAppStyle.css 파일에서 정의한 것입니다.

.styleName{
your properties here...
}

앱을 꺼낸 후 로컬 서버를 다시 시작해야 합니다. 경우에 따라 변경 사항이 반영되지 않을 수 있습니다.

주 이전 버전에서는 프로덕션 및 개발용으로 생성된 파일이 두 개 있었습니다.현재 버전에서는 "webpack.config.js"라는 이름의 파일 중 하나를 변경해야 합니다.감사해요.

사용하고 있다3.4.1의 react-scripts, 접근하겠습니다.

1. npm run eject그 2. "" (설정) "Configuration (설정)" ( 을 .webpack.config.js
2. ★★test: cssRegex 그냥 검색해보세요.cssRegex
3. 이제 다음과 같은 것을 보게 될 것입니다.

test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),

그후 뒤에importLoaders:1,modules:true, 그냥 ★★★★★★★★★★★★★★★」save 5.206. 5.할 수 되었습니다.npm start사용법을 있는 경우)

내가 사용했을 때 여기서 [name]__[local]__[hash:base64:5]가

 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }

래래지지 used used...modules:true나한테는 효과가 있었어요

1. 합니다.npm run eject
2. '열다'를 열어보세요.webpack.config.jsfilename을 클릭합니다.
3. ★★test: cssRegex을 사용하다

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: {
      // mode: 'icss',
      getLocalIdent: getCSSModuleLocalIdent,
    },
  }),

create-react-app을 이젝트해야 합니다.그 후 webpack 설정 파일에 다음 2 행을 추가합니다.

그리고 그것을 사용하려면 css를 원하지 않는 컴포넌트에 로드합니다(컴포넌트 키와 css는 같은 폴더에 있습니다).

import classes from './SomeComponentStyle.css';

...

<div className={classes.RedDiv}>

Some Component Style.css 내부

.RedDiv {
  /* styles for red div */
}

버전 1.1.4를 사용하고 있기 때문에 CSS 모듈은 디폴트로는 동작하지 않습니다.버전 2.0보다 이전 버전에서는 css 파일명을 name.module.css로 변경하여 디폴트로 동작합니다.

고객님의 요구에 따라react-scriptsversion (파일의 버전을 확인할 수 있습니다):

위해서react-scripts이전 버전2.0.0:

1. 만약 당신이 당신의 프로젝트에서 git을 사용하고 있다면 당신은 당신의 변경을 커밋하고 그것들을 푸쉬해야 합니다.

2. 하다npm run eject

3. 웹 팩 구성 파일 편집dev그리고.prod다음과 같은 변경을 가합니다.

4. 앱을 실행 중인 경우 앱을 중지하고 다시 실행하면 변경 사항을 찾을 수 있으며 CSS 모듈을 사용할 수 있습니다.

---

처음에react-scripts버전2.0.0:

담당자의 "Adding a CSS Modules Stylesheet" (CSS 모듈 스타일시트 추가)에 따라 주십시오.create-react-app문서를 참조해 주세요.

제목 ##i는 react-script 버전 3.4.3(최신 버전)을 사용합니다.다음 단계를 따르기만 하면 됩니다.

명령어 npm run eject를 실행합니다.

그런 다음 열려 있는 webpack.config.js에 구성 파일을 가져옵니다.

검색 테스트: cssRegex 또는 cssRegex 를 검색하면 다음과 같은 결과가 나타납니다.

테스트: cssRegex,

          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          }),

importLoaders:1 뒤에 modules:true를 추가하고 파일을 저장합니다.

이제 npm start를 사용하여 서버를 재시작할 수 있으며, 적용된 스타일을 볼 수 있습니다.

.js 파일 및 Import 스테이트먼트를 다음과 같이 엽니다.

import cssStyleClassName from './MyAppStyle.css';

Import 시 스타일링 파일에 .css 확장자를 추가하는 것을 잊지 마십시오.

이 Import 스테이트먼트를 사용하면 컴포넌트 태그에서 다음과 같은 변경을 할 수 있습니다.

<div className={cssStyleClassName.styleName}></div>

styleName에 정의되어 있습니다.MyAppStyle.css파일

.styleName{
your properties here...
}

In webpack.config.js file find this keyword 'css-loader'.
You will find below code in line number 82 for react version-16.13
{
   loader: require.resolve('css-loader'),
   options: cssOptions,      
}

Replace above object with 

{
   loader: require.resolve('css-loader'),
   options: {
      modules: {
        mode: "local",
        localIdentName: "[name]_[local]_[hash:base64:5]"
      },
      import: true,
      importLoaders: true
    }     
}

Start the server again by npm start(If changes are not reflected)

패치 스타일 패키지라는 새로운 라이브러리가 있습니다.

보다 선언적인 스타일 적용 방법을 도입하고 있습니다.코드를 다음과 같이 묶어야 합니다.<PatchStyles classNames={style}>어디에style는 스타일 모듈에서 기본 Import입니다.StackBlitz에서의 사용 예를 참조해 주세요.

React-17.0.2에서는 아래 스크립트 실행

npm 실행 이젝트

파일로 이동

webpack.config.syslog

검색(Search(검색)

cssRegex

다음과 같이 모듈 개체를 추가합니다.

          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment,
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]"
              }
          })

그러면 css 파일은 Eg라는 이름으로 동작합니다.header.css

언급URL : https://stackoverflow.com/questions/50234890/how-to-use-css-modules-with-create-react-app