Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Storybook and AngularCLI

Storybook and AngularCLI

Storybookの3.4.0とAngularCLI対応のお話

Yosuke Kurami

March 12, 2018
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. About me • ૔ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular +

    TypeScriptͰSPA࡞ͬͯ·͢ • ӕ͖ͭ·ͨ͠ 
 React + Redux + FlowͰSSRͯ͠·͢
  2. ՝୊ͷ಺༰ • getstorybook͸Storybook༻ͷwebpackઃఆΛ͍࣋ͬͯΔ • getstorybook͸AngularCLIʹґଘ͠ͳ͍ • Style RulesͳͲɺStorybook༻ͷwebpack configΛ֦ு͢Δඞ ཁ͕͋ͬͨ

    • Component css: tostring-loader / raw-loader • Global css: style-loader • Angular CLIϢʔβʔʹͦΕΛ΍ΒͤΔͷ͸ແཧήʔײ
  3. ΍ͬͨ͜ͱ ͜͜ʹBOHVMBSDMJ͕͋Δ͡ΌΖʁ ʈТʈ  㱭BOHVMBSDMJKTPO㱬 ͜ΕΛ ʈТʈ  㱭 TUPSZCPPL

    㱬 ʈТʈ  㲇㱭㱬㲇 ͜͏͡Όͬʂ ʈТʈ  㱭BOHVMBSDMJ@DPOpHKT㱬
  4. ·ͱΊ • @storybook/angular ࢖ͬͯͶ • ஁͑ͯΑ͔ͬͨbuildے • @angular/cli + webpackΛࣗ෼Ͱ֦ு͢Δํ

    ๏͸͓֮͑ͯ͘ͱͲ͔͜Ͱ໾ʹཱ͔ͭ΋ʁ • υΩϡϝϯτແ͍ͷͰɺࣗݾ੹೚Ͱ