yuheijotaki.com

Nuxt.js をさわってみる

Vue.js と WordPressと使って、SSRできる仕組みということで Nuxt.js を触ってみました。
yuheijotaki/nuxt-study_20190919: Nuxt.js for study 20190919

f:id:jotaki:20190924093802p:plain

導入は基本これ通りです。
Vue CLI使うとすんなり環境構築できますね
Nuxt.js使ってみた - Qiita

sass を使う

index.vueやcomponents配下の.vueファイルでsassを使うには、ふつうのVueと同じで $ npm i -D sass-loader node-sass
をインストールする

_mixin.scss など .scssのグローバルファイルを使う

$ npm run dev をすると触れるようになるのですが、Sassのグローバルファイルを使いたい場合、Nuxt Style Resources というモジュールをインストールして nuxt.config.js に設定情報を記述する。
$ npm i -D @nuxtjs/style-resources
nuxt.config.js

module.exports = {
  // ...
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      '~/assets/sass/foundation/_variable.scss',
      '~/assets/sass/foundation/_mixin.scss',
      '~/assets/sass/foundation/_common.scss'
    ]
  }
}

これでindex.vueやcomponents配下の.vueファイルで_variable.scssで設定した変数が使えるようになる。
参考: 《Nuxt.js》Sassの共通の変数やmixinを一括で各コンポーネントに読み込む方法。 - Qiita

参考