全局SASS/SCSS變量在Vue項目中應用解決方案

場景說明

// 這是一個存放變量的scss文件 "@/styles/_variables.scss"
// color font ...
$cf-light: #B6B6B6;
$cf-gray: #8C8C8C;
$cf-med: #505050;
$cf-dark: #333333;
$cf-highlight: #1775F0;

我要在其餘文件內都用這個來保證樣式統一。好比某個組件

<template>
  <div class="notice">注意！</div>
</template>

<style lang="scss" scoped>
.notice {
  color: $cf-highlight;
}
</style>

這樣就報錯了。要改爲下面這樣

<template>
  <div class="notice">注意！</div>
</template>

<style lang="scss" scoped>
@import "@/styles/_variables.scss";
.notice {
  color: $cf-highlight;
}
</style>

簡單描述一下：作Vue項目的時候，有時候咱們預先設置了一個主題樣式文件（_variables.scss），存放大量的定義的SASS變量，須要在不一樣的組件中使用，默認是沒法使用的，除非每一個組件內都引入這個_variables.scss文件，十分麻煩，這裏提供幾種方案。

解決辦法

我有幾個解決方案，理論上均可行，你們不妨根據實際應用場景來實踐一下。

使用sass-resources-loader

若是項目使用Vue-cli 2/3，或者Vue項目用的Webpack，用這個loader都是能夠的。官方對於各類場景已經寫的很清楚了，請看sass-resources-loader。具體不說明了。

Vue-cli 3.x 下的最方便的方案

這個我還沒實踐，不過應該是可行的。。。給小白們本身去試，好用的話記得留言回覆下哦~

打開vue.config.js文件，進行以下配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.scss";`
      }
    }
  }
};

具體細節，請閱讀：

• Globally Load SASS into your Vue.js Applications
• How to Import a Sass File into Every Vue Component in an App

這兩篇原理相同，就是細節上有點不一樣，怕有的打不開就放兩個給你們研究下。

Nuxt

這裏仍是接住一個插件style-resources-module，這個最近纔出的，高級不少，在他以前，都是用nuxt-sass-resources-loader，若是你的項目還在用舊的，能夠換成新的。nuxt-sass-resources-loader官方也說了不在更新維護，建議使用style-resources-module。

怎麼用呢？這裏有Example，我也複製一份，醒目。打開nuxt.config.js

export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/styles/_variables.scss',
      './assets/styles/_mixins.scss' // use underscore "_" & also file extension ".scss"
      ]
  }
}

本身注意文件路徑~

結語

如今不用每一個組件都寫導入變量文件了，是否是輕鬆多了，也不會由於文件名，路徑調整，而膽戰心驚的文件批量替換。

我爲何寫這個文章，由於雖然之前研究過，可是時代變化很快，一些更好的方案出現了，可是不少人依舊採用舊的，可能在新的項目上帶來一些問題，因此就更新了。

（小字，看不見）：其次，我其實在使用easywebpack的egg+vue腳手架遇到了這個問題，搞了半天沒搞好。。。去官方羣裏問沒人鳥我，因而悽慘退羣（底層技術渣的待遇）。

參考：

• Load a global settings.scss file in every vue component?