Nuxt.jsでグローバルに適用したいCSSを設定する

nuxt.config.jsのcssプロパティを使って、すべてのページに適用するCSSを設定してみます。

サンプルコード

まずはCSSファイルを用意します。
assets/css/ にstyle.cssを追加します。

body {
  color: red;
}

nuxt.config.jsのcssプロパティで先ほど追加したCSSファイルを指定します。

export default {
  css: [
    '~/assets/css/style.css'
  ]
}

これで全ページに適用されるCSSを設定することができました。
Sassを使用できるように設定している場合、Sassファイルを指定することもできます。

export default {
  css: [
    '~/assets/css/style.scss'
  ]
}

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31