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

:::warning
⚠️ 官方文件特別提到：

**請勿**在 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"]')