개요

create-react-app(react-scripts) 2018년 10월 version2.0 시리즈 출시를 시작으로 CSS-Modules가 공식적으로 지원됩니다.
그리고 2018년 11월 버전2.1과의 발표 TypeScript도 정식으로 지원됐다.
따라서 버전 1과 때와는 달리 eject 등 특별한 일을 하지 않아도 CSS-Modules와 TypeScript를 비교적 간단하게 가져올 수 있다.
본 보도는 집필 시간(2019-01-20) 최신 버전(2.1.3)을 사용하는create-react-app은 공식 문서에 따라 TypeScript 등을 추가한 설정에 따라 확인용 샘플 구성 요소를 스토리북으로 표시할 수 있는 곳에서 시도한 지식을 공유한다고 밝혔다.
참고:create-react-app(adding-a-sass-stylesheet)
참고:create-react-app(adding-typescript)
참고: 보안 응용(developing-components-in-inisolation)
참고: CSS 모듈 - 밝은 미래에 오신 것을 환영합니다.
참고: StoryBook

집필 시 (2019년 01월 20일) 버전

version
create-react-app
2.1.3
storybook
4.1.7

$ grep \"react-scripts\" package.json
    "react-scripts": "2.1.3"

$ sb --version
4.1.7

한 일

※ 다음 단계를 제외하고 오류를 없애기 위해 하나만 추가로 실행되었습니다.그 내용에 관해서 마지막 "[보충] AP 시작 시 오류!?"에서 설명한 대로 해당 매개변수의 값을 수정합니다.

· SASS, TypeScript, StoryBook 추가

공식 문서('개요'의 링크 주소 참조)에 쓰여진 바와 같이create-react-app에서 생성된 AP의 초기 상태에만 SASS, TypeScript, StoryBook 설정을 추가합니다.

npx create-react-app my-app
cd my-app
yarn add node-sass
yarn add typescript @types/node @types/react @types/react-dom @types/jest
npx -p @storybook/cli sb init

/ 샘플 구성 요소 추가

TypeScript 또는 CSS-Modules에서 작성된 구성 요소가 제대로 작동하는지 확인하는 구성 요소를 만듭니다.
Sample.tsx는 TypeScript가 구현하는 구성 요소입니다.
tsx 파일을 제외하고 CSS 정의에서 CSS-Modules와 SASS 형식을 사용해 보십시오.
＜sample 구성 요소 관련 파일 목록＞

Sample.tsx
Sample.css
Sample.module.scss
Sample.scss
Variables.scss

＜Sample.tsx＞

import React from 'react';

// style with normal css
import './Sample.css';
// style with sass
import './Sample.scss';
// style with CSSModules(with sass style)
import style from './Sample.module.scss';
// define variable with type.
const sampleStr: string = 'CSS-Modules and SASS-Style';
// enum of Typescript
enum SampleEnum {ENUM1, ENUM2};

const Sample = () => (
  <div>
    {/* Sampleコンポーネントに閉じた".sample"CSSクラスの定義 */}
    <div className="sampleStyle">Normal-CSS</div>
    <div className="sass sassSampleStyle">SASS-Style</div>
    <div className={style.sassSampleStyle}>{sampleStr} : {SampleEnum[0]}</div>
  </div>
);

export default Sample;

＜Sample.module.scss＞

@import './Variables.scss';

.sass {
  // SASSの文法が有効である確認のため無意味に入れ子にしてます
  &SampleStyle {
    padding: 1rem;
    background-color: $colorOfCssModules;
  }
}

샘플 구성 요소 App.js와 StoryBook에 추가

＜src/App.js에 샘플링 구성 요소 추가 >

import Sample from './sample/Sample';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Sample />
// ～省略～ 

＜StoryBook(src/stories/index.js)에 Sample 구성 요소 추가＞

import Sample from '../sample/Sample';
// ～省略～ 
storiesOf('Sample', module)
  .add('Sample', () => <Sample />);

확인

AP 호스트는 yarn start 명령을 통해 시작할 수 있습니다.
yarn storybook 명령을 사용하여 StoryBook을 시작할 수 있습니다.

어떤 것이든 추가 샘플 구성 요소는 문제없이 나타날 수 있습니다!
소스도github에 올려요.가능하다면gitclone으로 실제로 이동하세요.
https://github.com/kinocoffeeblack/my-create-react-app-with-storybook-ts

[보충] AP 부팅 중 오류!?

기본적으로'해본 일'에 쓰인 방법으로 할 수 있을 것 같지만 이번에는 최초의'yarn start'가 시작되었을 때 다음과 같은 오류로 시작에 실패했기 때문에 약간의 시간을 추가했다.

$ yarn start
yarn run v1.12.3
$ react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.4"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
... 

버전 2.1.3create-react-app은'babel-loader'의'8.0.4'가 필요하며, 다른 한편, 스토리북 설정을 추가할 때'^8.0.5'버전은 패키지로 지정됩니다.json에 추가되었기 때문에 일치하지 않는 일이 발생한 것 같습니다.

쓸데없는 내용

오류 정보의 내용을 단서로 다음과 같은 변경을 하였는데, 어쨌든 오류는 이미 제거되었다.

package.json의 "devDependencies"에 설정된 "babel-loader"의 버전 지정을 "^8.0.5"에서 "8.0.4"

로 변경합니다

  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@storybook/addon-actions": "^4.1.7",
    "@storybook/addon-links": "^4.1.7",
    "@storybook/addons": "^4.1.7",
    "@storybook/react": "^4.1.7",
    "babel-loader": "8.0.4" ←コレ！
  }

"yarn.lock"파일 일시 삭제

"yarn install"리셋

아마도 이 문제는 일시적인 것일 것입니다. 머지않아create-react-app의 작은 버전 업그레이드 등이 개선될 것이라고 생각합니다.
개선되면 이 보도도 미리 수정된다.