diff --git a/package.json b/package.json
index 9cacac4f5..3f4fe78de 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "@types/qs": "^6.9.7",
     "@types/ua-parser-js": "^0.7.36",
     "@unocss/preset-uno": "^0.49.4",
+    "@unocss/transformer-directives": "^0.49.4",
     "@unocss/vite": "^0.49.4",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 240b83a1c..a485b8a7b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,7 @@ specifiers:
   '@types/qs': ^6.9.7
   '@types/ua-parser-js': ^0.7.36
   '@unocss/preset-uno': ^0.49.4
+  '@unocss/transformer-directives': ^0.49.4
   '@unocss/vite': ^0.49.4
   '@vitejs/plugin-vue': ^4.0.0
   '@vitejs/plugin-vue-jsx': ^3.0.0
@@ -112,6 +113,7 @@ devDependencies:
   '@types/qs': 6.9.7
   '@types/ua-parser-js': 0.7.36
   '@unocss/preset-uno': 0.49.4
+  '@unocss/transformer-directives': 0.49.4
   '@unocss/vite': 0.49.4_rollup@2.79.1+vite@4.1.1
   '@vitejs/plugin-vue': 4.0.0_vite@4.1.1+vue@3.2.47
   '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.1.1+vue@3.2.47
diff --git a/uno.config.ts b/uno.config.ts
index 2a592467b..09dcf8b77 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,9 +1,11 @@
 import { defineConfig } from '@unocss/vite';
 import presetUno from '@unocss/preset-uno';
+import transformerDirectives from '@unocss/transformer-directives';
 
 export default defineConfig({
   exclude: ['node_modules', 'dist', '.git', '.husky', '.vscode', 'public', 'build', 'mock', './stats.html'],
   presets: [presetUno({ dark: 'class' })],
+  transformers: [transformerDirectives()],
   shortcuts: {
     'wh-full': 'w-full h-full',
     'flex-center': 'flex justify-center items-center',