export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: name => {
            name = name.slice(3)
            return `element-plus/packages/theme-chalk/src/${name}.scss`
          },
          resolveComponent: name => {
            return `element-plus/lib/${name}`
          },
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/theme/var.scss";`,
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve('src'),
    },
  },
})

使用了element-plus按需加载样式然后使用css.preprocessorOptions一起使用报错@use rules must be written before any other rules

解决方案如下：

modules.exports = {
    ...    
    css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@use "@/theme/var.scss" as *;`,
          },
        },
    },
    ...
}