create-react-app에 babel-plugin-styled-components 설치

Question

create-react-app 응용 프로그램과 함께 styled-components-babel-plugin을 사용하여 Chrome Dev에서 클래스 이름으로 구성 요소 이름을 가져 오려고합니다. 도구. 하지만 어쨌든, 나는 클래스 이름을 바꾸지 않습니다. 또한 그것을 시도, 내가 미리 설정의 조합을 많이 시도

{ 
    "presets": ["env"], 
    "plugins": ["babel-plugin-styled-components"] 
} 

(반응-응용 프로그램 포함) 및 기타 바벨 CONFIGS : 나는 웹 사이트에 설명처럼 바벨과 플러그인을 설치하고 내이 같은 .babelrc을 생성 package.json에서는 작동하지만 작동하지 않습니다. 문제는 내가 바벨을 사용하지 않고 간신히 알기 때문에 내가 왜 그것을 필요로하는지입니다. 그래서 나는 바벨 또는 스타일 부품면에서 오류를 만들었는지 전혀 모른다. 누구나 스타일이 적용된 구성 요소 babel 플러그인을 사용하는 예제 프로젝트가 있습니까?

Answer 1

Daniel의 몇 가지 팁 끝에 다른 방법으로 바벨 플러그인을 설치하려고했습니다. 결과적으로, babel 플러그인을 꺼내지 않고 create-react-app (https://github.com/facebookincubator/create-react-app/issues/2611)에 추가하거나 직접 플러그인을 설치할 수는 없습니다. 이를 위해, 내가 그 명령을 실행 : 그 후

npm run eject 
npm install --save-dev babel-plugin-styled-components 

을 나는 새 파일의 전체 무리를 가지고 내 package.json는 방식으로 더 큰 가지고 있지만,이 같은 바벨에 대한 섹션이 포함 :

"babel": { 
    "presets": [ 
     "react-app" 
    ] 
    } 

을

남은 것은 바벨 플러그인을 거기에 추가하여 사용하는 것입니다. 그래서 스타일 - 구성 요소의 플러그인 들어, package.json 내 바벨 섹션은 이제 다음과 같습니다

"babel": { 
    "presets": [ 
     "react-app" 
    ], 
    "plugins": ["babel-plugin-styled-components"] 
    } 

이제

플러그인이 작동을 나는 행복합니다 =) 감사합니다 다니엘을 올바른 방향으로 날을 가리키는 위해!