Nuxt.jsにCSS Modulesを導入する

2020.09.26
Nuxt.jsにCSS Modulesを導入する

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

検証した環境

1 nuxt 2.14.3

CSS Modulesを使う

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

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

Hello.vue
<template>
  <p class="hello">hello world!</p>
</template>

<style scoped>
.hello {
  color: #00f;
}
</style>

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

Hello.vue
<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を編集します。
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

おすすめ