vite.config.ts中引入全局样式--踩坑

如果你和我写的一样那就是没有问题。

css: {
    preprocessorOptions: {
      scss: {
        // 全局添加scss
        additionalData: `@use '@/style.scss' as *;`,
      },
    },
  },

你是不是在main.ts中引入是没有问题的，但是以上方式样式则不生效。

我在网上寻找了好几个小时，终于是豁然开朗。

 翻译的意思就是：

scss.additionalData 仅添加到 scss 内容之前。如果您没有在项目中加载任何 .scss 文件（或 <style lang="scss"> 块），则没有地方可以插入。
将 scss.additionalData 用于 CSS 变量是一种不好的做法。 CSS 变量是运行时属性。 scss.additionalData 通常用于编译时 SCSS 变量。

而且<style lang="scss">中必须有内容，才可以引入成功。