環境

• 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.jsの css-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, '../'),
    }
  ]
},

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