如何在vue项目中配置全局sass样式

第一步 创建全局scss

需要安装 sass

在scr目录下新建一个scss文件
（一般命名为global.scss/theme.scss）

第二步 配置vue.config.js

在根目录下的vue.config.js进行配置

如果没有vue.config.js  文件则新建一个文件

    module.exports = {
      css: {
        loaderOptions: {
          sass: {
            data: '@import "全局sass文件路径";',
          },
        },
      },
    };
    //在global.scss/theme.scss文件中写入
    @function px2vw($px){
        @return $px/1080*100vw //1080是指设计图的实际宽度
    }
    

第三步 使用全局sass

    应用在vue文件style中使用import引入global.scss/theme.scss文件
	// @import "../scss/global.scss";
    .list{
    width: px2vw(750);//px2vw为函数名，750为实际px像素大小