Nuxt.jsにCSS Modulesを導入する

Nuxt.jsのプロジェクトにCSS Modulesを導入します。

CSS Modulesを使う

Nuxt.jsのプロジェクトは追加のライブラリや設定を記述しなくともCSS Modulesが使用出来ます。

例えば scoped で作っていたものを

<template>
  <p class="hello">hello world!</p>
</template>
 
<style scoped>
.hello {
  color: #00f;
}
</style>

CSS Modulesで書く場合は以下のようになります。

<template>
  <p :class="$style.hello">hello world!</p>
</template>
 
<style module>
.hello {
  color: #00f;
}
</style>

• class → :class に
• クラス名の前に $style. を追加
• <style> タグに module を指定

CSS Modules独特のクラス名が付与されました！

付与されるクラス名の設定を変更

デフォルトでは [クラス名]_[ランダムな5文字] が設定されます。

• ex1: hello_1-Gqq
• ex2: sample_2jEpD

これを変更するためにはnuxt.config.jsを編集します。

export default {
  build: {
    loaders: {
      cssModules: {
        modules: {
          localIdentName: '[name]__[local]__[hash:base64:6]',
        },
      },
    },
  },
・・・
}

↑の場合　[ファイル名]__[クラス名]__[ランダムな6文字] になります。

• ex1: Hello__hello__1-GqqE
• ex2: Hello__sample__2jEpDV