每个组件中单独引用

假设Sass全局变量保存在 global.scss 文件中，路径为 ../path/global.scss ,在需要引用该全局变量的组件中通过 import 引入：

// some vue component
<template lang="html">
<!-- some code -->
</template>

<script>
// some code
</script>

<style lang="scss">
// 引入sass全局变量
import ../path/global.scss;

// other code
</style>

这样做的弊端显而易见：每个组件需要单独写 import ，除了代码重复，如果组件间目录结构不一样，路径还要小心调整。虽然可以设置路径变量防止路径出错，但重复的问题还是没有解决。 所以不推荐这种方法 。

更改Webpack配置文件

webpack-simple

这里是使用Vue脚手架 webpack-simple 中配置的方法：

安装 sass-resources-loader

官方介绍该loader的作用：This loader will @import your SASS resources into every required SASS module. So you can use your shared variables & mixins across all SASS styles without manually importing them in each file.

但是在 webpack-simple 脚手架中按照Github主页上的介绍，并没有成功引入Sass全局变量。。。而是通过修改默认 vue-loader 解决的

修改默认vue-loader

在Webpack配置文件中修改后的整个 vue-loader 代码如下：

// webpack.config.js中vue-loader部分代码
{
  test: /\.vue$/,
  use: {
    loader: 'vue-loader',
    options: {
      loaders: {
        sass: [
          'vue-style-loader',
          'css-loader',

          // postcss-loader非必须
          'postcss-loader',
          'sass-loader?indentedSyntax=1',
          {
            loader: 'sass-resources-loader',
            options: {

              // 需更改为项目中实际scss文件路径
              resources: path.resolve(__dirname, '../path/global.scss'),
            },
          },
        ],
        scss: [
          'vue-style-loader',
          'css-loader',

          // postcss-loader非必须
          'postcss-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {

              // 需更改为项目中实际scss文件路径
              resources: path.resolve(__dirname, '../path/global.scss'),
            },
          },
        ],
      },
    },
  },
},

经过上述配置，项目中所有Vue组件，只要 <style lang="scss"> (或者sass)标签中的代码都可以使用在 global.scss 中定义的全局变量了，等效将 global.scss 引入进来。

nuxt

这里是使用 Nuxt.js 时配置方法：

同样需要安装 sass-resources-loader

在 nuxt.config.js 中进行如下配置：

const resolve = require('path').resolve

const isVueRule = (rule) => {
  return rule.test.toString() === '/\\.vue$/'
}
const isSASSRule = (rule) => {
  return ['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1
}
const sassResourcesLoader = {
  loader: 'sass-resources-loader',
  options: {
    resources: [
      resolve(__dirname, 'sass/variables.sass')
    ]
  }
}

module.exports = {
  css: ['~/sass/main.scss'],
  build: {
    extend (config) {
      config.module.rules.forEach((rule) => {
        if (isVueRule(rule)) {
          rule.query.loaders.sass.push(sassResourcesLoader)
          rule.query.loaders.scss.push(sassResourcesLoader)
        }
        if (isSASSRule(rule)) {
          rule.use.push(sassResourcesLoader)
        }
      })
    }
  }
}

参考资料

【1】 Load a global settings.scss file in every vue component?
【2】 Enable pre-processors of global scss variables
【3】 Using Pre-Processors — Loading a global settings file