Nuxt3でSCSSのMixin、変数を全てのVueファイルに共通適用する方法を紹介😎新しいSCSSのシンタックスに注意です

こんにちは！

WEB のフロントエンドを実装する際、PostCSS や SCSS など様々な選択肢があると思います。Post CSS は機能・シンタックスを拡張していける反面、都度都度カスタムする手間が発生し、プロジェクトごとに秘伝のタレ化する傾向があるため、全機能をデフォルトで搭載している SCSS の方を最近では利用しています。お客様への内製化を行う場合、SCSS の方が説明しやすいですね。

本記事では、Nuxt3 で SCSS を扱う際に必須となる共通変数や Mixin の定義方法を紹介します。

想定する読者

• Nuxt3 で実装を行うヒト
• SCSS を使用してスタイルを実装するヒト

はじめに

なぜ SCSS を採用するのか？

私たちが SCSS を採用する理由として、以下の利点が挙げられます。

• デフォルトでスタイル実装に関する全ての機能を搭載
• 経験上、拡張がほぼ必要ないので実装中に考えることが少ない
• お客様への内製化支援を行う際に公式リファレンスを案内可能、ドキュメントの作成コストが低い

よく比較される PostCSS ですが、PostCSS は機能を最小限にしてスタートできるためビルド速度が高速ですが、後から拡張することを前提としているため、秘伝のタレ化する傾向があります。もちろんドキュメントを残したり、個人チームが有志でメンテナンスしている PostCSS のツールキットを使用すればドキュメンテーションコストは最小限に抑えられますが、お客様へ責任を持って内製化支援を行う場合には、少々相性が悪いです。

私たちは AWS の開発のみならず、フロントエンドの開発内製化支援を事業として行っている関係上、SCSS を使用してプロジェクト推進することが多いです。

Nuxt3 での SCSS 共通化方法

では実装方法を紹介しますが、実装方法はとてもシンプルです。まず nuxt.config.ts に共通の SCSS ファイルのパスを指定します。

// nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        javascriptEnabled: true,
        scss: {
          additionalData: `
            @use "@/assets/styles/global/var";
            @use "@/assets/styles/global/mixin";
          `,
        },
      },
    },
  },
})

そして、共通の SCSS ファイルを設置します。

// @/assets/styles/global/var

$black: #000000;
$white: #ffffff;

// @/assets/styles/global/mixin

@mixin foo() {
  width: 100px;
}

呼び出す際は以下のようにします。

<template>
  <div class="foo">Foo</div>
</template>

<style lang="scss" scoped>
.foo{
  color: var.$black;
  @include mixin.foo();
}
</style>

これで Mixin と変数を共通化することができました。応用すれば、フォントなどその他のスタイル情報も共通化することが可能ですので、好みに合わせて拡張してみてください。

まとめ

本記事では Nuxt3 の SCSS 実装で必須の SCSS 共通化の実装方法について紹介しました。本記事を参考して保守性の高いスタイル情報を記述してみてください。

AWSサーバーレス、フロントエンドの開発はお気軽にお問い合わせください。