The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

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

以上で完了です。