diff --git a/src/assets/style/fixed/base.scss b/src/assets/style/fixed/base.scss
index 4ef1dd2d..c76a4e3d 100644
--- a/src/assets/style/fixed/base.scss
+++ b/src/assets/style/fixed/base.scss
@@ -1,5 +1,4 @@
 // 优化显示
-
 html, body {
   margin: 0px;
   height: 100%;
diff --git a/src/assets/style/fixed/element.scss b/src/assets/style/fixed/element.scss
index 3f717487..a6c7fc9b 100644
--- a/src/assets/style/fixed/element.scss
+++ b/src/assets/style/fixed/element.scss
@@ -1,5 +1,4 @@
 // element 样式补丁
-
 .el-card {
   &.is-always-shadow {
     box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
diff --git a/src/assets/style/fixed/markdown.scss b/src/assets/style/fixed/markdown.scss
index cd71054f..8d139882 100644
--- a/src/assets/style/fixed/markdown.scss
+++ b/src/assets/style/fixed/markdown.scss
@@ -1,5 +1,4 @@
 // markdown 样式补丁
-
 .markdown-body {
   ul {
     list-style: disc;
diff --git a/src/assets/style/fixed/vue-grid-layout.scss b/src/assets/style/fixed/vue-grid-layout.scss
index c2c045a6..c9f2344b 100644
--- a/src/assets/style/fixed/vue-grid-layout.scss
+++ b/src/assets/style/fixed/vue-grid-layout.scss
@@ -1,5 +1,4 @@
 // vue-splitpane 样式补丁
-
 .vue-grid-item {
   &.vue-grid-placeholder {
     border: 1px solid $color-border-1;
diff --git a/src/assets/style/fixed/vue-splitpane.scss b/src/assets/style/fixed/vue-splitpane.scss
index 9c27f3b5..106aa33e 100644
--- a/src/assets/style/fixed/vue-splitpane.scss
+++ b/src/assets/style/fixed/vue-splitpane.scss
@@ -1,7 +1,4 @@
 // vue-splitpane 样式补丁
-
-@import '~@/assets/style/unit/color.scss';
-
 .splitter-pane-resizer {
   background-color: $color-border-1 !important;
   opacity: 1 !important;
diff --git a/src/assets/style/theme/register.scss b/src/assets/style/theme/register.scss
index 92ef3828..47dca207 100644
--- a/src/assets/style/theme/register.scss
+++ b/src/assets/style/theme/register.scss
@@ -1,4 +1,3 @@
-@import '~@/assets/style/public.scss';
 @import '~@/assets/style/theme/theme-base.scss';
 
 @import '~@/assets/style/theme/d2/index.scss';
diff --git a/src/components/d2-container/components/d2-source.vue b/src/components/d2-container/components/d2-source.vue
index 96c78aa7..b9704af1 100644
--- a/src/components/d2-container/components/d2-source.vue
+++ b/src/components/d2-container/components/d2-source.vue
@@ -41,7 +41,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .d2-source {
   $borderRadius: 4px;
   $paddingLR: 15px;
diff --git a/src/components/d2-icon-select/index.vue b/src/components/d2-icon-select/index.vue
index a70ccfed..7079d763 100644
--- a/src/components/d2-icon-select/index.vue
+++ b/src/components/d2-icon-select/index.vue
@@ -159,7 +159,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .group {
   max-height: 400px;
   overflow-x: hidden;
diff --git a/src/components/d2-markdown/index.vue b/src/components/d2-markdown/index.vue
index 2a0a33b2..52f8d71e 100644
--- a/src/components/d2-markdown/index.vue
+++ b/src/components/d2-markdown/index.vue
@@ -83,7 +83,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@/assets/style/public.scss';
 .component-markdown {
   .spin-group {
     height: 100px;
diff --git a/src/components/d2-page-cover/index.vue b/src/components/d2-page-cover/index.vue
index 4cb595b1..63540c64 100644
--- a/src/components/d2-page-cover/index.vue
+++ b/src/components/d2-page-cover/index.vue
@@ -33,7 +33,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .d2-page-cover {
   @extend %full;
   @extend %unable-select;
diff --git a/src/layout/header-aside/components/header-error-log/components/list/index.vue b/src/layout/header-aside/components/header-error-log/components/list/index.vue
index 79a01796..6ba9ba6b 100644
--- a/src/layout/header-aside/components/header-error-log/components/list/index.vue
+++ b/src/layout/header-aside/components/header-error-log/components/list/index.vue
@@ -165,7 +165,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@/assets/style/public.scss';
 .d2-error-log-list__expand-group {
   .d2-error-log-list__expand {
     padding-left: 20px;
diff --git a/src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue b/src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue
index 035b45bd..b14bca7e 100644
--- a/src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue
+++ b/src/layout/header-aside/components/header-theme/components/d2-theme-list/index.vue
@@ -69,7 +69,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .theme-preview {
   height: 50px;
   width: 100px;
diff --git a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
index 73a6f843..52124b33 100644
--- a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
+++ b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
@@ -35,7 +35,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .d2-panel-search-item {
   height: 64px;
   margin: 0px -20px;
diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
index 1d1f3c95..8546b5ae 100644
--- a/src/layout/header-aside/components/panel-search/index.vue
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -183,7 +183,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .panel-search {
   margin: 20px;
   .panel-search__input-group {
diff --git a/src/pages/demo/components/contextmenu/style/pub.scss b/src/pages/demo/components/contextmenu/style/pub.scss
index 5dc547dd..c2655957 100644
--- a/src/pages/demo/components/contextmenu/style/pub.scss
+++ b/src/pages/demo/components/contextmenu/style/pub.scss
@@ -1,4 +1,3 @@
-@import '~@/assets/style/public.scss';
 .contextmenu-pad {
   height: 300px;
   background-color: $color-bg;
diff --git a/src/pages/demo/components/countup/index.vue b/src/pages/demo/components/countup/index.vue
index abc2a506..9e952b8d 100644
--- a/src/pages/demo/components/countup/index.vue
+++ b/src/pages/demo/components/countup/index.vue
@@ -75,7 +75,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .page {
   .group {
     display: flex;
diff --git a/src/pages/demo/components/icon/icon.vue b/src/pages/demo/components/icon/icon.vue
index 75254e18..ba4eb5c7 100644
--- a/src/pages/demo/components/icon/icon.vue
+++ b/src/pages/demo/components/icon/icon.vue
@@ -9,7 +9,6 @@
 </template>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .icon-demo {
   transition: all .3s;
   font-size: 100px;
diff --git a/src/pages/demo/components/icon/select.vue b/src/pages/demo/components/icon/select.vue
index 392d1a80..138c4e9d 100644
--- a/src/pages/demo/components/icon/select.vue
+++ b/src/pages/demo/components/icon/select.vue
@@ -38,7 +38,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .title-group {
   margin-top: 20px;
   margin-bottom: 10px;
diff --git a/src/pages/demo/components/icon/svg.vue b/src/pages/demo/components/icon/svg.vue
index 56b51abe..f55091cd 100644
--- a/src/pages/demo/components/icon/svg.vue
+++ b/src/pages/demo/components/icon/svg.vue
@@ -13,7 +13,6 @@
 </template>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .icon-card {
   display: flex;
   justify-content: center;
diff --git a/src/pages/demo/components/layout/grid.vue b/src/pages/demo/components/layout/grid.vue
index a95e9600..c56e22be 100644
--- a/src/pages/demo/components/layout/grid.vue
+++ b/src/pages/demo/components/layout/grid.vue
@@ -98,7 +98,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .page {
   .vue-grid-layout {
     background-color: $color-bg;
diff --git a/src/pages/demo/element/basic-color/index.vue b/src/pages/demo/element/basic-color/index.vue
index e25a1a54..b655b2fc 100644
--- a/src/pages/demo/element/basic-color/index.vue
+++ b/src/pages/demo/element/basic-color/index.vue
@@ -92,7 +92,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/unit/color.scss';
 .color {
   border-radius: 4px;
   height: 90px;
diff --git a/src/pages/demo/playground/log/console/index.vue b/src/pages/demo/playground/log/console/index.vue
index b66645a4..d23b74ad 100644
--- a/src/pages/demo/playground/log/console/index.vue
+++ b/src/pages/demo/playground/log/console/index.vue
@@ -57,7 +57,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .page {
   .page__image-demo {
     border-radius: 4px;
diff --git a/src/pages/demo/playground/store/gray/index.vue b/src/pages/demo/playground/store/gray/index.vue
index 006984b1..801b7383 100644
--- a/src/pages/demo/playground/store/gray/index.vue
+++ b/src/pages/demo/playground/store/gray/index.vue
@@ -67,7 +67,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .page {
   .colorful {
     @extend %unable-select;
diff --git a/src/pages/demo/playground/store/theme/index.vue b/src/pages/demo/playground/store/theme/index.vue
index 34468d20..a15168e4 100644
--- a/src/pages/demo/playground/store/theme/index.vue
+++ b/src/pages/demo/playground/store/theme/index.vue
@@ -59,7 +59,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .page {
   .theme-preview {
     height: 50px;
diff --git a/src/pages/demo/plugins/better-scroll/base.vue b/src/pages/demo/plugins/better-scroll/base.vue
index b6ba1027..dcbe4773 100644
--- a/src/pages/demo/plugins/better-scroll/base.vue
+++ b/src/pages/demo/plugins/better-scroll/base.vue
@@ -43,7 +43,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .demo-bs-wrapper {
   height: 200px;
   width: 300px;
diff --git a/src/pages/demo/plugins/better-scroll/to.vue b/src/pages/demo/plugins/better-scroll/to.vue
index 8520928a..912b85b2 100644
--- a/src/pages/demo/plugins/better-scroll/to.vue
+++ b/src/pages/demo/plugins/better-scroll/to.vue
@@ -87,7 +87,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .demo-bs-wrapper {
   height: 400px;
   position: relative;
diff --git a/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue b/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
index 2b3aabd4..1bb290fa 100644
--- a/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
+++ b/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
@@ -45,7 +45,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .col {
   padding: 20px;
   border-radius: 4px;
diff --git a/src/pages/error-page-404/page.vue b/src/pages/error-page-404/page.vue
index 921a08d5..d265b7b9 100644
--- a/src/pages/error-page-404/page.vue
+++ b/src/pages/error-page-404/page.vue
@@ -8,7 +8,6 @@
 </template>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .page {
   background: #303133;
   background-blend-mode: multiply,multiply;
diff --git a/src/pages/index/page.vue b/src/pages/index/page.vue
index c244c6f3..71ae26e8 100644
--- a/src/pages/index/page.vue
+++ b/src/pages/index/page.vue
@@ -59,7 +59,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
 .page {
   .page__logo {
     width: 120px;
diff --git a/src/pages/login/style.scss b/src/pages/login/style.scss
index 39bf04de..5fc44ca4 100644
--- a/src/pages/login/style.scss
+++ b/src/pages/login/style.scss
@@ -1,4 +1,3 @@
-@import '~@/assets/style/public.scss';
 .login-page {
   background-color: #EDF4FA;
   height: 100%;
diff --git a/vue.config.js b/vue.config.js
index e08f8071..477ca67c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -10,6 +10,14 @@ module.exports = {
   devServer: {
     publicPath: baseUrl // 和 baseUrl 保持一致
   },
+  css: {
+    loaderOptions: {
+      // 设置 scss 公用变量文件
+      sass: {
+        data: `@import '~@/assets/style/public.scss';`
+      }
+    }
+  },
   // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
   chainWebpack: config => {
     // 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559