Vue.jsのSFC CSSを使って、HTMLタグに複数のCSSクラスセレクタを適用する方法

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 機能

クラスとスタイルのバインディング

参考