vue项目中scss mixin实现非实体样式全局引入

vue项目中非实体的样式（函数、变量），使用scss全局变量和全局mixin。可以在任何组件中而不用再引入，在vue项目中则需要在vue.config.js中配置css选项，像下面这样，具体可参考官方文档：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 全局引入变量和 mixin
        additionalData: `
          @import "@/assets/scss/variable.scss";
          @import "@/assets/scss/mixin.scss";
        `
      }
    }
  }
}

mixin的优先级仅次于全局变量（variables.scss中定义的），这样除了这两者之外的其他文件都可以使用直接mixin，无需再引入mixin文件。

优点：

1. 精简代码。
2. 样式代码进行分类，可读性强。
3. 可扩展性强，要增加样式只需给mixin增加参数。
4. 可维护性强，很容易定位并对样式进行增删改的操作