WordPress + Nuxt.js でポートフォリオサイトを作る その6

WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その6

GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/

前回から1ヶ月ほど空いてしまいましたが再開

@nuxtjs/style-resources を使う

変数用のファイルなどグローバルに読み込むscss用に @nuxtjs/style-resources を使う。

$ npm i -D @nuxtjs/style-resources

でインストール後、nuxt.config.js を下記のようにする

  modules: [
    '@nuxtjs/style-resources'
  ],
  // .scssファイルをグローバルに読み込む
  styleResources: {
    scss: [
      '@/assets/scss/foundation/_config.scss',
      '@/assets/scss/foundation/_mixin.scss'
    ]
  },

以前はscssファイル指定のところ、 ... '@/assets/ ... ではなく ... './assets/ ... みたいにしていましたが今回はいけなくちょっとハマりました。

ress.cssを使う

reset.css と normalize.css のいいとこ取りリセットcssの ress.css を使う。

$ npm i -D ress

でインストール後、nuxt.config.js の css: に

  css: ['ress'],

としてあげるとグローバルに読み込みされる。