How to define the variables into the global sass

In project development, in order to allow px automatically converted into rem, define a global style, the code is as follows:

$ proof: 375/10; 

@function r ($ px) { 
    @return $ PX / $ + the system; 
}

Then introduced in the file vue time:

<style scoped lang="scss" rel="stylesheet/scss">
//引入global.scss
@import "./assets/styles/global.scss";
#app {
  font-size: pr(16);
  color: #2c3e50;
}
</style>

But there is a problem, if others also use this global.scss vue page document, then we can only go in one by one to @import, this is very troublesome, so, thinking can not say the introduction of a one-time, all vue page can automatically introduce it?

By looking for some information, but also finally we found a way:

1. Add dependence

npm install sass-resources-loader --save-dev

2. Modify the build inutils.js

The 
SCSS: generateLoaders ( 'Sass' ) 
is modified to:

　scss: generateLoaders('sass').concat(

　　　{

　　　　　loader: 'sass-resources-loader',

　　　　　options: {

　　　　　　　resources: path.resolve(__dirname, '../src/assets/styles/global.scss')

　　　　　}

　　　}

　)

3. To achieve the effect