vue 項目中 引入css sass less 全局變量的方式

當項目達到了一定規模時， 代碼規範，組件化就成了重中之重， 之前已經寫了幾篇組件化的文章， 接下來說一下css 的規範，css 使用sass 的全局變量定義樣式， 好處是 更換主題， 主色調的變更時， 不用一個頁面一個頁面的去找， 只需要改一個變量值就ok了。如果有不明白或者沒用過 sass 的可以去看我之前的文章 sass 入門

全局的sass 文件內容大致是這樣的

$nav-6: #0B3166;
$nav-7: #001D3F;
$nav-8: #001430;

$primary-color: $blue-6;
$info-color: $blue-6;

@mixin title() {
  font-size:$font-l; 
  color:$heading-color;
  font-weight:600;
  line-height:24px;
}

類似的定義了很多這種變量。
接下來 就是如何引用以及使用的問題了。
引用肯定不能每個文件都去引， 這樣很麻煩。需要全局引入。
我們項目 是使用 vuecli3（其他配置方式）， 配置方式有一下兩種：

1. 在 module.exports 下

  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項
      sass: {
        // @/ 是 src/ 的別名 這裏寫下你的 文件地址
        data: `@import "@/index/.../common.scss";`
      }
    }
  }

2. chainWebpack 下， 這需要安裝 sass-resources-loader

    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          // Provide path to the file with resources
          resources: "./src/../common.scss"
        })
        .end();
    });

接下來在main.js 中正常引入 就可以了
import “@/index/…/common.scss”;

引入成功後就是如何使用了
就像這樣

.header {
      @include title-dark-01; // mixin的使用
      background-color: $nav-6; // 變量的使用
    }