sass中定义的变量如何引入全局

在项目开发中，为了让px自动转换成rem,定义了一个全局的样式，代码如下：

$ratio: 375/10;

@function pr($px) {
    @return $px / $ratio + rem;
}

然后在vue文件里引入的时候：

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

但是有个问题，如果其他的vue页面也要用到这个global.scss文件，那么我们还是只能一个个去@import进去，这样显得很麻烦，所以，想着说能不能一次性引入，所有的vue页面都能自动引入呢？

通过查找了些资料，还终于发现了一个办法：

1.添加依赖

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

2.修改build中的utils.js

将
scss: generateLoaders('sass')
修改成:

　scss: generateLoaders('sass').concat(

　　　{

　　　　　loader: 'sass-resources-loader',

　　　　　options: {

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

　　　　　}

　　　}

　)

3.实现效果