TL;DR
- CSSセレクタは
<style></style>
内に.example
のように定義する
<template></template>
側では$style.example
のように呼び出す
- 複数のCSSクラスセレクタを適用する場合は、配列として記述する
例文
<template>
// 中略
<div :class="$style.icons_line">
<img :class="[$style.icon, $style.clickable]" src="@/assets/xxxxx1.svg" height="20"
@click="open_delete_modal(item.memo_id)">
<img :class="[$style.clickable, $style.icon]" src="@/assets/xxxxx2.svg" height="20"
@click="open_edit_modal(item.memo_id)">
</div>
// 中略
</template>
<style module>
.icons_line {
text-align: right;
}
.icon {
/* margin-left: 10px; */
margin-left: 5px;
margin-right: 5px;
}
.clickable:hover {
cursor: pointer;
background:red
}
</style>
参考箇所
SFC CSS 機能
クラスとスタイルのバインディング
参考