Vue3开发中使用loader引入scss变量文件

1.在Vue3中引入scss文件的几种方式

第一种就是常规的scss文件，如reset等用于清除默认格式的scss文件，可以直接在main.js中引用，全局生效。
第二种是变量式scss文件，如用于定义系统主题的css变量、函数（**可导出通过js引入**）等scss文件，这种的也有两种引用方式
    1.在Vue的SFC中通过import引用scss文件路径然后再style标签中使用，局部注册使用；
    2.config.js文件中通过loader解析注入，全局注册使用。

2.为什么使用loader

我们工程化中的webpack或者vite是打包工具，所有文件都是一个模块，每个模块都是转化成JS文件或者JSOM文件进行解析和识别，loader工具就是将打包工具不识别的scss文件转化成可识别的js文件然后进行注入。

3.如何使用loder

webpack中引用

module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
        @import "@/assets/styles/theme.scss";
        // 注意写分号
        // 注意多个文件在下边继续引用
        `,
      },
    },
  },
});

vite中引用

export default () => {
    return defineConfig({
        css: {
            preprocessorOptions: {
              scss: {
                additionalData: '@/assets/styles/theme.scss;' 
              }
            },
        }
    })
}

注意loader的版本，如果是V8的版本使用prependDatea,以上的版本使用additionalData
需要重新启动项目