VueComponentを作りstyle moduleを当てて実装したが、StoryBookで確認したら全くCSSを認識してくれなかった。
オレンジ色になって欲しいボタン
<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, '../'),
}
]
},
これで無事オレンジのボタンが表示され解決しました。