Nuxt.js 起手式配置和筆記

styleResources

https://zh.nuxtjs.org/api/configuration-build/#styleresources

匯入全域的 sass，將常用的變數和 mixin 注入到所有的 .vue 組件裡，省去一個個在組件 style 區塊中重複撰寫 @import "..."。

首先安裝 @nuxtjs/style-resources

npm i @nuxtjs/style-resources

設定 nuxt.config.js

// nuxt.config.js

export default {
  /* ... */
  
  modules: [
    '@nuxtjs/style-resources'
  ],
  
  styleResources: {
    // 匯入你自訂的 sass 變數
    sass: [
      './assets/sass/_functions.sass',
      './assets/sass/_variables.sass'
    ]
  },
}

⚠️ 官方文件特別提到：

請勿在 sass 檔內匯入「實際的」樣式，因為它會把這些樣式都塞進所有組件裡，導致建構或開發階段時編譯變的巨慢巨肥。

最好只匯入變數、mixin、函式等，因為它們經建構後就不存在了。

// _variables.sass

// ❌ 別這麼做
.text-blood
  color: red
  
// ✅ 變數 👌
$blood: #f00

// ✅ mixin 👌
@mixin wh($w, $h: $w)
  width: $w
  height: $h

https://github.com/nuxt-community/style-resources-module/blob/master/README.md#warning

安裝 Sass Loader

npm i node-sass sass-loader

解決首屏 CSS 閃爍

在此載入全域 css 樣式，而不是在 layouts/default.vue 的 style 區塊中 import

// nuxt.config.js

export default {
  /* ... */

  css: [
    './assets/sass/style.sass'
  ],
}

另外設定 extractCSS

// nuxt.config.js

export default {
  build: {
    /* ... */

    extractCSS: true,
  }
}

配置 Fontawesome

// 新建 plugins/font-awesome.js

import Vue from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

Vue.component('fa', FontAwesomeIcon)

// nuxt.config.js

export default {
  /* ... */
  
  plugins: [
    /* ... */
    '~/plugins/font-awesome',
  ],
  
  modules: [
    /* ... */
    'nuxt-fontawesome',
  ],
  
  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      },
      {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['fab']
      },
    ]
}

在組件中使用 Fontawesome:

div
  //- solid
  fa(icon='beer')
  
  //- brand
  fa(:icon='["fab", "facebook"]')