我在项目里自定义了vue.config.js的rules关于scss的loader所以我是直接子啊loader配置options就可以

      {
          test: /\.scss$/,
          loader: "sass-loader",
          options: {
            additionalData: `@import "@/theme/var.scss";`,
          }
          
        }

关于cass的options配置属性名不同版本会有不同定义，具体要看自己的版本

如果不是自定义了loader可以使用下面的配置来实现loader的加载项

sass/scss篇

sass/scss文件与vue组件样式代码

/* variable.scss */
$color: orange;


// vue组件内的style标签，将要使用上述变量的地方
<style lang="scss">
.scss div {
  color: $color;
}
</style>

sass 全局变量引入方法一

使用css.loaderOptions
此处友情提示 sass-loader v7 之前使用 data：’’ 之后使用prependData：‘’请根据项目sass-loader版本选择
重点提示！！！！引用处分号“；”不能缺少，缺少直接报错，因为此方法是直接插入语句块至项目中使用sass语法的标签内，sass语法强制必须使用分号“；”结尾，更详细讲解请参考vue-cli官方文档。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // data：`@import "~@/assets/variable.scss";` v7之前使用 的是data，现在改成了prependData
        prependData: `@import "~@/assets/variable.scss";`
        /* prependData: `
              @import "~@/assets/variable.scss";
              @import "~@/assets/variable2.scss";
          ` */
      }
    }
  }
}

sass 全局变量引入方法二

使用chainWebpack
根据使用方法选择安装插件 style-resources-loader或者sass-resource-loader
友情提醒：**patterns: “./src/assets/variable.scss”**引用的scss文件，如果文件内语法存在问题，也会直接报错，此处不需要在引用处最后添加分号“；”，文件内请根据sass与scss语法规则编辑，如果我没有料错，此方法应该是把引用文件的内容插入目标文件，而非上文方法提到的插入一个import
使用方法代码如下：

module.exports = {
  chainWebpack: config => {
	// 需要安装 style-resources-loader 插件
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 需要插入的文件路径
          patterns: "./src/assets/variable.scss"
          // 需要插入的文件路径数组
          // patterns: ["./path/to/vars.styl", "./path/to/mixins.styl"]
        })
        .end();
    });
    // 也可以使用 sass-resource-loader 插件
    // const oneOfsMap = config.module.rule("scss").oneOfs.store;
    // oneOfsMap.forEach(item => {
    //   item
    //     .use("sass-resources-loader")
    //     .loader("sass-resources-loader")
    //     .options({
    //       // 需要插入的文件路径
    //       resources: "./src/assets/variable.scss"
    //       // 需要插入的文件路径数组
    //       // resources: ["./path/to/vars.scss", "./path/to/mixins.scss"]
    //     })
     //    .end();
    });
  }
}

sass 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
	//  patterns: "./src/assets/variable.scss",
      patterns: [path.resolve(__dirname, "./src/assets/variable.scss")]
    }
  }
}

less篇

less文件与vue组件样式代码

/* variable.less */
@color: pink;


// vue组件内的style标签，将要使用上述变量的地方
<style lang="less">
.less {
  > div {
    color: @color;
  }
}
</style>

less 全局变量引入方法一

使用css.loaderOptions
less此方法只支持变量key:value赋值，若要使用less文件中变量，请使用以下两种方案

module.exports = {
  css: {
  	loaderOptions: {
	  less: {
        globalVars: {
          "@color": "#f00"
        }
      }
	}
  }
}

less 全局变量引入方法二

使用chainWebpack
需要安装 style-resources-loader 插件

module.exports = {
  chainWebpack: config => {
	// 需要安装 style-resources-loader 与stylus一致
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 需要插入的文件路径
          patterns: "./src/assets/variable.less"
          // 需要插入的文件路径数组
          // patterns: ["./path/to/vars.less", "./path/to/mixins.less"]
        })
        .end();
    });
  }
}

less 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

module.exports = {
  pluginOptions: {
  	"style-resources-loader": {
      preProcessor: "less",
      patterns: "./src/assets/variable.less"
      // patterns: ["./src/assets/variable.less"]
    }
  }
}

Vue scss 引入变量报错