本篇主要是參考這篇 Using SASS global variables in Nuxt JS。

Vue 專案中，常常會有全域共有的色票、class、元件 ... 之類的資源需要共用。 像是專案中可能有兩個 scss 想要共用。

color.scss

$white: #ffffff;
$black: #000000;
$white-smoke: #f2f2f2;
$snow: #fafafa;
$alice-blue: #eaf7ff;
$ghost-white: #f7fbff;

bootstrap.scss

.h-100 {
    height: 100% !important;
}

.h-75 {
    height: 75% !important;
}

.h-50 {
    height: 50% !important;
}

.h-25 {
    height: 25% !important;
}

目錄結構：

.
├─assets
│   └── scss
│      ├── bootstrap.scss
│      └── color.scss
│
├ # ... 略過 ...
│
└ nuxt.config.js

這個時候如何引入呢？

1. sass 支援

既然要使用 scss，那 sass 的支援是肯定要有的！

$ npm install --save-dev node-sass sass-loader

2. style-resource plugin

這是一個 Nuxt.js 的 plugin，他們的 slogan 很有趣： "Nobody likes extra @import statements!" 確實！我們真的滿討厭每個 Component 都要 @import 一次的。

參考文件：style-resources-module

$ npm install --save-dev @nuxtjs/style-resources

nuxt.config.js 編輯

該安裝的相依性都裝了，可以開始更改設定檔了！

export default {

  // ... 略過 ...

  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/style-resources' // 主要是這個，要加入 style-resources
  ],
  /*
  ** 這邊是要自己手動新加入的位置
  ** 樣式資源位置
  */
  styleResources: {
    scss: ['./assets/scss/*.scss']
  },
  // ... 略過 ...
}

這樣在 assets/scss 目錄下所有 scss 就是全域可使用了！

<style lang="scss" scoped>
.navbar {
  p {
    color: $snow; // #fafafa
  }
}
</style>

這樣就可以全域使用了，