4.1.sccs全局引入

1.官网

共享配置 | Vite 官方中文文档

2.全局引入css变量、scss变量，或者引入全局scss样式文件

是用于配置 CSS 预处理器的选项，允许你对 SCSS、Sass、Less、Stylus 等 CSS 预处理器进行定制化设置。通过 css.preprocessorOptions 配置，你可以为这些CSS 预处理器提供特定的选项，例如自动引入全局样式、设置变量或自定义路径等。

// vite.config.js
export default defineConfig({
  plugins: [
   css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/scss/variable.scss";@import "@/assets/scss/main.scss";'
      }
    }
  ]
  })

在此引入后，不需要在main.js中二次引入

如果有异常，只有在main.js引入一个其他scss文件或者在.vue文件中使用<style>，并且里面有内容，则 scss.additionalData 配置的全局scss文件就可以正确引入了 使用 css.preprocessorOptions的优点

1. 全局变量和样式：对于 SCSS 或 Less，你可以使用 additionalData 或 modifyVars 来全局配置一些公共变量或样式文件，减少了在每个文件中手动导入的工作量。
2. 简化配置：通过在 vite.config.js 中直接配置预处理器选项，你可以在一个地方管理所有预处理器的配置，避免在每个文件中进行重复设置。
3. 兼容性：通过设置 javascriptEnabled 等选项，可以解决 Less 中的动态表达式问题，保证预处理器在不同环境下都能正常工作。