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; // 变量的使用
    }