[Bug Report] @use rules must be written before any other rules. 无法使用additionalData注入import的scss文件

[leon-kfd]

Element Plus version

1.3.0-beta.5

OS/Browsers version

Chrome > 90

Vue version

3.2.28

Reproduction Link

https://github.com/element-plus/element-plus-vite-starter

Steps to reproduce

使用https://github.com/element-plus/element-plus-vite-starter 创建模板， 在vite config => scss => additionalData中尝试使用import导入自己的scss变量文件.

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "~/styles/var.scss";`,
      },
    },
  },

What is Expected?

正常运行

What is actually happening?

报错：

[vite] Internal server error: @use rules must be written before any other rules.
  ╷
1 │ @import "~/styles/var.scss";@use 'sass:map';
  │                             ^^^^^^^^^^^^^^^
  ╵
  node_modules\element-plus\theme-chalk\src\message.scss 1:29  root stylesheet
  Plugin: vite:css
  File: D:\Project\element-plus-vite-starter\node_modules\element-plus\theme-chalk\src\message.scss
  Error: @use rules must be written before any other rules.
    ╷
  1 │ @import "~/styles/var.scss";@use 'sass:map';
    │                             ^^^^^^^^^^^^^^^
    ╵
    node_modules\element-plus\theme-chalk\src\message.scss 1:29  root stylesheet
      at Object.wrapException (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:1246:17)
      at ScssParser0.error$3 (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:88439:17)
      at ScssParser0.error$2 (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:88444:19)
      at ScssParser0.atRule$2$root (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:92620:19)
      at ScssParser0._stylesheet0$_statement$1$root (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:92222:24)
      at StylesheetParser_parse__closure1.call$0 (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:95326:17)
      at ScssParser0.statements$1 (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:89426:31)
      at StylesheetParser_parse_closure0.call$0 (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:95309:23)
      at ScssParser0.wrapSpanFormatException$1$1 (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:88468:23)
      at ScssParser0.wrapSpanFormatException$1 (D:\Project\element-plus-vite-starter\node_modules\sass\sass.dart.js:88494:19)
Unrestricted file system access to "D:/Project/element-plus-vite-starter/src/components/layouts/BaseHeader.vue"
Unrestricted file system access to "D:/Project/element-plus-vite-starter/src/components/HelloWorld.vue"

[p4m]

Maybe the following insight helps:

[antizhyk]

Hello all, I have a similar problem. The file is plugged at the very top of the main stylesheet. I use React.