vue-cliプロジェクトでscssグローバル変数を使用する

1、取付sass-resources-loadernpm i sass-resources-loader --save-dev
2、vue-cliプロジェクトのbuild/utils.jsのsassのロード設定を修正する

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

次のように変更します.

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat({
      loader:'sass-resources-loader',
      options:{
        resources:path.resolve(__dirname,'./../src/scss/global.scss')
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

ここでpath.resolveは、導入するscssファイルを転送する必要があります.dirnameは現在のディレクトリを表し、自分のbase.scss(保存後に開発コマンドを再起動する必要がある:npm run dev)構成が完了すると、scss変数をグローバルに参照できます.
3.エントリファイルmain.jsにベーススタイルシートimport './../src/scss/base.scss'を導入する
構成が完了すると、ベーススタイルシートのスタイルをグローバルに参照できます.