vue项目全局导入sass变量，函数

使用步骤

1.创建一个init.scss和fun.scss文件,在init导入fun，比如：

//fun.scss[scss全局函数]
$ratio: 375 / 10;

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


//init.scss
@import './fun.scss'; //根据自己的需求，导入不同的文件

//背景颜色
$background-color-base:#F5F7FA;


:export {
  background-color-base: $background-color-base;
}

2.在vue项目根路径下创建vue.config.js,在新创建的文件里面添加下面的代码，然后重启项目就可以了[注：vue.config.js和package.json是同级]

image.png

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "./src/styles/init";`, //注意“;”是必须的，./src/styles/init 的"init"是根据自己创建的文件名称
            },
        },
    },
}

3.在需要的.vue文件里面使用

image.png