diff --git a/src/main.ts b/src/main.ts
index a516878..a081d54 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,10 +5,6 @@ import store from './store'
 import router from './router'
 import locales from './locales'
 
-import './styles/vendors/tailwind.scss'
-import './styles/vendors/nprogress.scss'
-import './styles/index.scss'
-
 createApp(app)
   .use(store)
   .use(router)
diff --git a/src/styles/vendors/element.scss b/src/styles/vendors/element.scss
new file mode 100644
index 0000000..cc7c144
--- /dev/null
+++ b/src/styles/vendors/element.scss
@@ -0,0 +1,4 @@
+// tailwind colors
+$--color-primary: #3b82f6;
+
+@use 'element-plus/packages/theme-chalk/src/common/transition.scss';
diff --git a/vite.config.ts b/vite.config.ts
index 74c7f1e..3afaa5c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -62,11 +62,11 @@ export default defineConfig(({ mode }) => {
         libraryName: 'element-plus',
         esModule: true,
         ensureStyleFile: true,
-        resolveStyle: (name) => {
+        resolveStyle: (name: string) => {
           name = name.slice(3)
           return `element-plus/packages/theme-chalk/src/${name}.scss`
         },
-        resolveComponent: (name) => {
+        resolveComponent: (name: string) => {
           return `element-plus/lib/${name}`
         }
       }]
@@ -142,6 +142,20 @@ export default defineConfig(({ mode }) => {
     build,
     plugins,
     optimizeDeps,
+
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `
+            @import "@/styles/vendors/element.scss";
+            @import "@/styles/vendors/tailwind.scss";
+            @import "@/styles/vendors/nprogress.scss";
+            @import "@/styles/index.scss";
+          `
+        }
+      }
+    },
+
     resolve: {
       alias: [
         {