Nuxt.jsでassetsのcssをグローバルにスタイルを適用する方法

2021年7月2日Vue.js

Nuxt.jsでグローバルにスタイルを適用する方法を紹介します。

目次から読む

複数のレイアウトがある場合でも、bodyやhtmlにかけるスタイリングなど共通のものがある場合、一箇所でまとめてスタイリングできると便利です。
そのために、assetsフォルダに作成したcssファイルにその内容をまとめて適用させます。

ディレクトリ構造は次の通りです。
Nuxt.jsでassetsのcssをグローバルにスタイルを適用する方法

assetsフォルダの中に、stylesフォルダを作成して、その中にmain.cssを作成しています。

main.cssの中身は適用したいものを記述します。

body {
  padding: 0;
  margin: 0;
}

  css: [
    '~/assets/styles/main.css'
  ],

nuxt.config.jsの中にcssがあるので、その[]の中に作成したcssファイルのpathを記述することでグローバルに適用できます。

Posted by devsakaso