LoginSignup
35

More than 5 years have passed since last update.

【Nuxt.js】共通で使用したいcssを読み込む

Posted at

nuxt使ってる時に各テンプレート内で必ず使用するcssをグローバルで適用させたいなーと思ったので、nuxtのレイアウトファイルにimportを書くことによって対応しました。

layouts/default.vue
<template>
  <div>
    <nuxt/>
  </div>
</template>

<script>
  import '@/assets/css/common.css'
</script>

・・・が、この方法だと新しいレイアウトファイルを作成した場合、
それぞれにimportを書く必要があることに気づいて発狂しかけたので調べたところ、公式ドキュメントにちゃんと解決策が書いてありました。(良い子のみんなはちゃんと公式ドキュメントも読もうね!)
cssプロパティ

てなわけでnuxt.config.jsに下記のようにcssプロパティを追加して事なきを得ました。

nuxt.config.js
module.exports = {
  css: [
    '@/assets/css/style.css',
  ],
}

やったぜ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35