Nuxt3で効率的にスタイルを書く

フロントエンド マークアップ

こんにちは。 エキサイト株式会社で24卒デザイナー内定者アルバイトをしている、齋藤です。

デザイナーとしてマークアップを行う場合、HTMLやスタイルを書くことが多いと思います。今回はNuxt3（Vue）で効率的にスタイルを書く方法を備忘録的に記します。

通常のCSSの場合

通常のCSSの場合は:rootを使用することで変数を宣言し、同一の内容は変数をあてることでスタイリングすることができました。

:root {
  --primary-black: #000000;
}

例えば、#000000のカラーを--primary-blackとして宣言した場合、

p {
  color: var(--primary-black);
}

pタグのcolorに宣言した変数を当ててあげると、color: #000000;として出力してくれますね。 :rootを使用することにより、いちいち中身を書くことなく効率的にスタイリングをすることができるのはもちろん、大本を変更することにより変数を使用している箇所にも変更が反映されるので修正が非常に楽になる利点があります。

同じことをNuxtでもやりたい

どうやらNuxtでは:rootを使用することはあまり一般的ではないようです。 定義するものはグローバルでありたいため、reset.cssを作成して:rootを定義してみましたが、各コンポーネントファイルで呼び出すのがうまくいきません。

:rootの代替方法の結論

:rootと同様のことをしたい場合、TSで定義をして各コンポーネントでimportして使うという方法があります。

手順1：TSで定義する

今回は/assetsの配下にVariants.tsを作成して定義していきます。

export const Colors = {
    PrimaryBlack: '#000000',
}

手順2：使用するコンポーネントにimportする

<script lang="ts">
import { Colors } from '~~/assets/Variants';

export default defineComponent ({
    setup(){
         return ({
              Colors,
         })
    }
})
</script>

Vue3で導入されたComposition APIで書くとこうなります。

スタイルにあてる

<style scoped>
p {
    color: v-bind('Colors.PrimaryBlack');
}
</ style>

v-bindを使用することで<style>内でTSで定義した変数をあてることができます。この場合だとcolor: #000000;として出力してくれます。

おわりに

ご紹介した方法で:rootと同様のことをNuxtでも実施でき、効率的にスタイルを書く＆変更することができるようになりました！ 私自身Nuxt＆Vue初心者ですので、もしかしたらもっといい方法があるかもしれません・・・（あったらご教授ください🙏）