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

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: `@use './src/styles/index.scss' as * ;`
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve('src'),
    },
  },
})

或者element引入css

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