Nuxt 全域 SASS 變數

這篇是我的筆記文章！
主要是參考這篇 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 的 plugin，他們的 slogan 很有趣
“Nobody likes extra @import statements!”
確實！我們真的滿討厭每個 Component 都要 @import 一次的

參考文件：Nuxt 中文、Nuxt 英文、GitHub
( 官方文件上有說道，方法已經改變了，移到 style-resources-module 來看，才是最新版本唷！ )

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

3. 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>

就可以這樣使用囉！

Leave a Reply