uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2019.9.7StoryBookでVueのCSS-Moduleが有効にならないときの解決策

StoryBookでVueのCSS-Moduleが有効にならないときの解決策

環境

  • VueCli3
  • Vue 2.6.10
  • @storybook/vue 5.1.11

発生した現象

VueComponentを作りstyle moduleを当てて実装したが、StoryBookで確認したら全くCSSを認識してくれなかった。

オレンジ色になって欲しいボタン オレンジ色になって欲しいボタン

Button.vue
<template>
  <button
    :class="$style.button"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>
<style module lang="scss">
  .button {
    font-size: 20px;
    line-height: 1;
    padding: 12px 24px;
    text-decoration: none;
    box-sizing: border-box;
    border-radius: 80px;
    cursor: pointer;
    background: #F88C1D;
    color: #fff;
    border: none;
    outline: none;
  }
</style>

解決方法

StoryBookではCSS Moduleがデフォルトで無効になっており、 webpack.config.jscss-loaderに設定を追記しなければいけません。

module: {
  rules: [
    {
      test: /\.scss$/,
      loaders: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
        'sass-loader'],
      include: path.resolve(__dirname, '../'),
    }
  ]
},

これで無事オレンジのボタンが表示され解決しました。

PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)