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

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

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',
  ]
}

以上で完了です。