The sky is the limit

Vue.js、PHP、Javaなどに関する開発情報を発信しています。時々日常生活に関しても触れます

Nuxt.jsでassetsに作成した共通cssを読み込む

Nuxt.jsでassetsに作成した共通cssを読み込む

nuxtjs
nuxtjs

今回はNuxt.jsで共通のcssを読み込む方法をご紹介します。

cssファイルをassets配下に作成

まずはcssファイルを作成します。
作成箇所はassetsで、今回は例としてmain.cssファイルを作成します。

assets/css/main.css

内容は適当です

.main {
    margin : 0 auto;
}

assets配下にcssディレクトリを作成し、そこにmain.cssを配置しています。

nuxt.config.jsで読み込み

共通で読み込むためにはcssプロパティで先ほどのmain.cssを読み込みます

ja.nuxtjs.org

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

以上で完了です。