diff --git a/src/component/avatar/index.less b/src/component/avatar/index.less
index 86ee6700..af3aa5a8 100644
--- a/src/component/avatar/index.less
+++ b/src/component/avatar/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-avatar {
   box-sizing: border-box;
diff --git a/src/component/avatarList/index.less b/src/component/avatarList/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/avatarList/index.less
+++ b/src/component/avatarList/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/backTop/index.less b/src/component/backTop/index.less
index a0844ff0..6112b803 100644
--- a/src/component/backTop/index.less
+++ b/src/component/backTop/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 /** backtop **/
 @width: 50px;
diff --git a/src/component/badge/index.less b/src/component/badge/index.less
index 54d81a8e..505a6be7 100644
--- a/src/component/badge/index.less
+++ b/src/component/badge/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-badge,
 .layui-badge-dot,
diff --git a/src/component/body/index.less b/src/component/body/index.less
index 35ee7cb3..1d35d673 100644
--- a/src/component/body/index.less
+++ b/src/component/body/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-body {
   display: block;
diff --git a/src/component/breadcrumb/index.less b/src/component/breadcrumb/index.less
index f568be13..285ce09a 100644
--- a/src/component/breadcrumb/index.less
+++ b/src/component/breadcrumb/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-breadcrumb {
   font-size: 0;
diff --git a/src/component/breadcrumbItem/index.less b/src/component/breadcrumbItem/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/breadcrumbItem/index.less
+++ b/src/component/breadcrumbItem/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/button/index.less b/src/component/button/index.less
index ac67696d..6b5edd78 100644
--- a/src/component/button/index.less
+++ b/src/component/button/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @button-primary-color: var(--button-primary-color);
 @button-primary-border-color: var(--button-primary-border-color);
diff --git a/src/component/buttonContainer/index.less b/src/component/buttonContainer/index.less
index 9adc09d5..36199535 100644
--- a/src/component/buttonContainer/index.less
+++ b/src/component/buttonContainer/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-btn-container {
   font-size: 0;
diff --git a/src/component/buttonGroup/index.less b/src/component/buttonGroup/index.less
index 41fd7dbb..dd7b4fa1 100644
--- a/src/component/buttonGroup/index.less
+++ b/src/component/buttonGroup/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @button-primary-color: @global-primary-color;
 @button-border-radius: @global-border-radius;
diff --git a/src/component/card/index.less b/src/component/card/index.less
index dcc2c84a..866dd07d 100644
--- a/src/component/card/index.less
+++ b/src/component/card/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @card-border-radius: var(--card-border-radius);
 @card-back-color: var(--card-back-color);
diff --git a/src/component/carousel/index.less b/src/component/carousel/index.less
index 0c51fbb1..f21bee59 100644
--- a/src/component/carousel/index.less
+++ b/src/component/carousel/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-carousel {
   position: relative;
diff --git a/src/component/carouselItem/index.less b/src/component/carouselItem/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/carouselItem/index.less
+++ b/src/component/carouselItem/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/checkbox/index.less b/src/component/checkbox/index.less
index dcdc8703..5f230fa2 100644
--- a/src/component/checkbox/index.less
+++ b/src/component/checkbox/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-form-checkbox {
   position: relative;
diff --git a/src/component/checkboxGroup/index.less b/src/component/checkboxGroup/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/checkboxGroup/index.less
+++ b/src/component/checkboxGroup/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/col/index.less b/src/component/col/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/col/index.less
+++ b/src/component/col/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/collapse/index.less b/src/component/collapse/index.less
index 61ca976c..1065184c 100644
--- a/src/component/collapse/index.less
+++ b/src/component/collapse/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-collapse {
   border-width: 1px;
diff --git a/src/component/collapseItem/index.less b/src/component/collapseItem/index.less
index 4fc50ca9..22fac313 100644
--- a/src/component/collapseItem/index.less
+++ b/src/component/collapseItem/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-colla-content,
 .layui-colla-item {
diff --git a/src/component/colorPicker/index.less b/src/component/colorPicker/index.less
index 97eca006..49dcc629 100644
--- a/src/component/colorPicker/index.less
+++ b/src/component/colorPicker/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-color-picker {
   position: relative;
diff --git a/src/component/container/index.less b/src/component/container/index.less
index 71a9fe15..a14b954e 100644
--- a/src/component/container/index.less
+++ b/src/component/container/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-container {
   position: relative;
diff --git a/src/component/countUp/index.less b/src/component/countUp/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/countUp/index.less
+++ b/src/component/countUp/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/dropdown/index.less b/src/component/dropdown/index.less
index b1edd7f8..37dea6f2 100644
--- a/src/component/dropdown/index.less
+++ b/src/component/dropdown/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-dropdown {
   position: relative;
diff --git a/src/component/dropdownMenuItem/index.less b/src/component/dropdownMenuItem/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/dropdownMenuItem/index.less
+++ b/src/component/dropdownMenuItem/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/empty/index.less b/src/component/empty/index.less
index 841642d2..110fce52 100644
--- a/src/component/empty/index.less
+++ b/src/component/empty/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-empty {
   margin: 0 8px;
diff --git a/src/component/exception/index.less b/src/component/exception/index.less
index ea7d21d5..69e0be92 100644
--- a/src/component/exception/index.less
+++ b/src/component/exception/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-exception {
   .layui-exception-image {
diff --git a/src/component/field/index.less b/src/component/field/index.less
index 96c123eb..81e1f0a4 100644
--- a/src/component/field/index.less
+++ b/src/component/field/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @field-border-color: var(--field-border-color);
 @field-border-radius: var(--field-border-radius);
diff --git a/src/component/footer/index.less b/src/component/footer/index.less
index f103dcdc..d313ee89 100644
--- a/src/component/footer/index.less
+++ b/src/component/footer/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-footer {
   box-sizing: border-box;
diff --git a/src/component/form/index.less b/src/component/form/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/form/index.less
+++ b/src/component/form/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/formItem/index.less b/src/component/formItem/index.less
index b99bc85b..fc1103eb 100644
--- a/src/component/formItem/index.less
+++ b/src/component/formItem/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @error_color: red;
 
diff --git a/src/component/fullscreen/index.less b/src/component/fullscreen/index.less
index 9adf2f3f..da9971fd 100644
--- a/src/component/fullscreen/index.less
+++ b/src/component/fullscreen/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-fullscreen {
   position: fixed;
diff --git a/src/component/header/index.less b/src/component/header/index.less
index 8723352b..95847f50 100644
--- a/src/component/header/index.less
+++ b/src/component/header/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-header {
   box-sizing: border-box;
diff --git a/src/component/icon/index.less b/src/component/icon/index.less
index 7f8afe15..dc8cfd81 100644
--- a/src/component/icon/index.less
+++ b/src/component/icon/index.less
@@ -1 +1 @@
-@import "../../theme/variable.less";
\ No newline at end of file
+@import (reference) "../../theme/variable.less";
\ No newline at end of file
diff --git a/src/component/iconPicker/index.less b/src/component/iconPicker/index.less
index 9a0e0db2..9c56bf80 100644
--- a/src/component/iconPicker/index.less
+++ b/src/component/iconPicker/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @icon-picker-border-radius: var(--icon-picker-border-radius);
 @icon-picker-checked-color: var(--icon-picker-checked-color);
diff --git a/src/component/input/index.less b/src/component/input/index.less
index a988a0b4..72ecf071 100644
--- a/src/component/input/index.less
+++ b/src/component/input/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @input-border-radius: var(--input-border-radius);
 @input-border-color: var(--input-border-color);
diff --git a/src/component/inputNumber/index.less b/src/component/inputNumber/index.less
index 8c74987a..624b4bff 100644
--- a/src/component/inputNumber/index.less
+++ b/src/component/inputNumber/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @border-color: #eee;
 @hover-border-color: @global-primary-color;
diff --git a/src/component/keyboard/index.less b/src/component/keyboard/index.less
index df5f9b96..9466d8b9 100644
--- a/src/component/keyboard/index.less
+++ b/src/component/keyboard/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-keyboard-header {
   height: 40px;
diff --git a/src/component/layout/index.less b/src/component/layout/index.less
index 3af26420..52c159c3 100644
--- a/src/component/layout/index.less
+++ b/src/component/layout/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-layout {
   flex: 1;
diff --git a/src/component/menu/index.less b/src/component/menu/index.less
index 931217d6..a689305e 100644
--- a/src/component/menu/index.less
+++ b/src/component/menu/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
   top: 0px;
diff --git a/src/component/page/index.less b/src/component/page/index.less
index 2ad2ee4b..4d4ef400 100644
--- a/src/component/page/index.less
+++ b/src/component/page/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-laypage {
   display: inline-block;
diff --git a/src/component/panel/index.less b/src/component/panel/index.less
index 1619a95f..c8c20439 100644
--- a/src/component/panel/index.less
+++ b/src/component/panel/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @panel-border-color: var(--panel-border-color);
 @panel-border-radius: var(--panel-border-radius);
diff --git a/src/component/popper/index.less b/src/component/popper/index.less
index a9f2b3d1..38576de8 100644
--- a/src/component/popper/index.less
+++ b/src/component/popper/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 // 主题颜色
 // 浅色 --> 默认使用
diff --git a/src/component/progress/index.less b/src/component/progress/index.less
index 7304ec4c..f99e5d7b 100644
--- a/src/component/progress/index.less
+++ b/src/component/progress/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-progress {
   position: relative;
diff --git a/src/component/quote/index.less b/src/component/quote/index.less
index 1733ea41..9c7e941d 100644
--- a/src/component/quote/index.less
+++ b/src/component/quote/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @block-default-color: var(--block-default-color);
 @block-border-radius: var(--block-border-radius);
diff --git a/src/component/radio/index.less b/src/component/radio/index.less
index 87cdb7e0..23a11acc 100644
--- a/src/component/radio/index.less
+++ b/src/component/radio/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-form-radio,
 .layui-form-radio * {
diff --git a/src/component/rate/index.less b/src/component/rate/index.less
index f322ec41..a58417ba 100644
--- a/src/component/rate/index.less
+++ b/src/component/rate/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-rate,
 .layui-rate * {
diff --git a/src/component/result/index.less b/src/component/result/index.less
index 8977dc87..0a8e9e21 100644
--- a/src/component/result/index.less
+++ b/src/component/result/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .result {
   text-align: center;
diff --git a/src/component/row/index.less b/src/component/row/index.less
index ff193f93..e4f16153 100644
--- a/src/component/row/index.less
+++ b/src/component/row/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-row:after,
 .layui-row:before {
diff --git a/src/component/select/index.less b/src/component/select/index.less
index 5d71581f..00d1dff2 100644
--- a/src/component/select/index.less
+++ b/src/component/select/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 dl.layui-anim-upbit > dd input[type="checkbox"] {
   display: none;
diff --git a/src/component/side/index.less b/src/component/side/index.less
index efdcc0e9..28751b94 100644
--- a/src/component/side/index.less
+++ b/src/component/side/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-side {
   overflow: auto;
diff --git a/src/component/skeleton/index.less b/src/component/skeleton/index.less
index 6a0f6902..dff27b9a 100644
--- a/src/component/skeleton/index.less
+++ b/src/component/skeleton/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .lay-skeleton {
   .lay-skeleton-item {
diff --git a/src/component/slider/index.less b/src/component/slider/index.less
index ffec40c4..ee353eac 100644
--- a/src/component/slider/index.less
+++ b/src/component/slider/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 // 横向样式
 .layui-slider-v {
diff --git a/src/component/splitPanel/index.less b/src/component/splitPanel/index.less
index c93ce1b1..a061a5bf 100644
--- a/src/component/splitPanel/index.less
+++ b/src/component/splitPanel/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .lay-split-panel {
   height: 100%;
diff --git a/src/component/step/index.less b/src/component/step/index.less
index 24ee2afa..cc1b38c3 100644
--- a/src/component/step/index.less
+++ b/src/component/step/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @width-height-pace: 24px;
 @step-color: @step-success-color;
diff --git a/src/component/switch/index.less b/src/component/switch/index.less
index 9cdd61d0..5ab56f0d 100644
--- a/src/component/switch/index.less
+++ b/src/component/switch/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-form-switch {
   position: relative;
diff --git a/src/component/tab/index.less b/src/component/tab/index.less
index 358885e1..e5e2d0b2 100644
--- a/src/component/tab/index.less
+++ b/src/component/tab/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-tab {
   margin: 10px 0;
diff --git a/src/component/table/index.less b/src/component/table/index.less
index f28c84af..5f9dd231 100644
--- a/src/component/table/index.less
+++ b/src/component/table/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .laytable-cell-checkbox {
   width: 34px;
diff --git a/src/component/textarea/index.less b/src/component/textarea/index.less
index af1ef065..419fe293 100644
--- a/src/component/textarea/index.less
+++ b/src/component/textarea/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @textarea-border-radius: var(--textarea-border-radius);
 @textarea-border-color: var(--textarea-border-color);
diff --git a/src/component/timeline/index.less b/src/component/timeline/index.less
index d8bb19a6..54046aa9 100644
--- a/src/component/timeline/index.less
+++ b/src/component/timeline/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-timeline {
   padding-left: 5px;
diff --git a/src/component/transfer/index.less b/src/component/transfer/index.less
index eb30b9e1..410b59cb 100644
--- a/src/component/transfer/index.less
+++ b/src/component/transfer/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 @transfer-box-border-radius: var(--transfer-box-border-radius);
 
diff --git a/src/component/tree/index.less b/src/component/tree/index.less
index fbe0c7e6..df34adbc 100644
--- a/src/component/tree/index.less
+++ b/src/component/tree/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-tree {
   line-height: 22px;
diff --git a/src/component/upload/index.less b/src/component/upload/index.less
index 97376e5f..326999f9 100644
--- a/src/component/upload/index.less
+++ b/src/component/upload/index.less
@@ -1,4 +1,4 @@
-@import "../../theme/variable.less";
+@import (reference) "../../theme/variable.less";
 
 .layui-upload-file {
   // display: none !important;