在 Vue 裡寫樣式，基本上都 Sass 起步。Sass 變數有很多好處，其中之一就是定義變數，在寫類似 danger, warning, info, primary 樣式的時候就不用每次都對顏色背景硬編碼了，而是直接用先前定義好的 Sass 變數。寫 UI 元件的時候，如何全域性Sass, 方法大概有三種，下面就簡單總結一下。

每個檔案引入

假如現在我們已經將變數都定義在 global.scss 檔案上了，如果要在某個 .vue 檔案裡使用變數就要先將其引入。

<template>...</template><script>...</script><style lang="scss">@import ("你的路徑/global.scss");.button {   background: $--primary-bg;}</style>

但是這種方法不長久，如果我們每個元件都要引入，那不是每個 .vue 都要 @import 一次？有點太麻煩了。

App.vue

如果你寫的是一個網站，那麼肯定會用到 App.vue 這個檔案。所以你可以在 App 這個元件裡 @import。注意：不要在 App 元件裡寫 scoped ，這樣引入的樣式都會應用到每個元件上。

<template>...</template><script>...</script><style lang="scss">@import "你的路徑/global.scss";...</style>

如果App.vue 裡有別的程式碼，那你可以將 App 獨立出來，如將 App 包裹你的專案程式碼，這相當於 HomePage 才是你真正的 App。

App   HomePage

loader引入

sass-resources-loader 可以將你的 .scss 檔案作為全域性引入，但是這個是要與 webpack 結合的。vue-cli3或者vue-cli4 也是通過修改vue.config.js 來實現。