ロゴテキスト ロゴ

    Nuxt.jsにCSS Modulesを導入する

    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>
    scopedの場合

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

    Hello.vue
    <template>
      <p :class="$style.hello">hello world!</p>
    </template>
     
    <style module>
    .hello {
      color: #00f;
    }
    </style>
    CSS Modulesの場合
    • 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文字] になります。

    CSS Modulesで付与されるクラス名変更
    • ex1: Hello__hello__1-GqqE
    • ex2: Hello__sample__2jEpDV
    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。