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

Vue.js

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

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

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

ディレクトリ構造

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

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

assets/styles/main.cssを作成する

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

body {
  padding: 0;
  margin: 0;
}

nuxt.config.jsに記述する

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

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

Vue.js

Posted by devsakaso