style-resources-loader replace css var import (#186)

byzer-org · Apr 18, 2022 · a8949b8 · a8949b8
1 parent 36baf67
commit a8949b8
Show file tree

Hide file tree

Showing 59 changed files with 67 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "npm": "^7.19.1",
     "panzoom": "^9.4.2",
     "sortablejs": "^1.14.0",
+    "style-resources-loader": "^1.5.0",
     "vue": "2.6.11",
     "vue-class-component": "7.2.3",
     "vue-click-outside": "^1.1.0",

diff --git a/src/components/AddSchedule/ScheduleForm.vue b/src/components/AddSchedule/ScheduleForm.vue
@@ -308,7 +308,7 @@ export default class Addschedule extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .schedule-form-crontab-wrap {
   display: flex;
   justify-content: space-between;

diff --git a/src/components/AddSchedule/index.vue b/src/components/AddSchedule/index.vue
@@ -343,7 +343,6 @@ export default class Addschedule extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
 .schedule-form-wrap {
   max-height: 60vh;
   overflow-y: auto;

diff --git a/src/components/CheckAction/index.vue b/src/components/CheckAction/index.vue
@@ -146,7 +146,7 @@ export default class CheckAction extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .alert-foot-wrap {
   display: flex;
   justify-content: space-between;

diff --git a/src/components/CheckSubmit/index.vue b/src/components/CheckSubmit/index.vue
@@ -72,7 +72,7 @@ export default class CheckSubmit extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .alert-foot-wrap {
   display: flex;
   justify-content: space-between;

diff --git a/src/components/CodeDialog/index.vue b/src/components/CodeDialog/index.vue
@@ -83,7 +83,7 @@ export default class CodeModal extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .code-dialog {
   .progress {
     line-height: 20px;

diff --git a/src/components/CodeEditor/index.vue b/src/components/CodeEditor/index.vue
@@ -381,5 +381,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 </style>
diff --git a/src/components/CodeMarkdownEditor/index.vue b/src/components/CodeMarkdownEditor/index.vue
@@ -190,7 +190,7 @@ export default class CodeMarkdownEditor extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 /* 工具栏 */
 .v-md-editor__toolbar {
   display: none;

diff --git a/src/components/CreateConnection/Form.vue b/src/components/CreateConnection/Form.vue
@@ -169,7 +169,7 @@ export default class CreateConnectionForm extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .connect-form {
   height: 450px;
   overflow-y: auto;

diff --git a/src/components/DAGView/index.vue b/src/components/DAGView/index.vue
@@ -199,7 +199,7 @@ export default class DAGView extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .des_wrap {
   .des_item {
     margin: 8px 0;

diff --git a/src/components/EditTask/index.vue b/src/components/EditTask/index.vue
@@ -316,7 +316,7 @@ export default class EditTask extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .schedule-form-wrap {
   max-height: 60vh;
   overflow-y: auto;

diff --git a/src/components/FailureDetail/index.vue b/src/components/FailureDetail/index.vue
@@ -76,7 +76,7 @@ export default class SetSchedule extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .log-wrap {
   .node-item-flex {
     display: flex;

diff --git a/src/components/GraphNode/index.vue b/src/components/GraphNode/index.vue
@@ -20,7 +20,7 @@ export default class GraphNode extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/css/variable.scss';
+
 .node-circle {
   position: relative;
   width: 32px;

diff --git a/src/components/Header/ChangeLang.vue b/src/components/Header/ChangeLang.vue
@@ -37,7 +37,7 @@ export default class ChangeLang extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .change-lang {
   margin-right: 10px;
   .drop-icon {

diff --git a/src/components/Header/GlobalHelp.vue b/src/components/Header/GlobalHelp.vue
@@ -30,7 +30,7 @@ export default class GlobalHelp extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .global-help {
   margin-right: 10px;
   .drop-icon {

diff --git a/src/components/Header/HeaderMenu.vue b/src/components/Header/HeaderMenu.vue
@@ -61,7 +61,7 @@ export default {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .el-menu--horizontal {
   &.el-menu-header {
     .el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover, .el-submenu .el-submenu__title:hover {

diff --git a/src/components/Header/UserInfo.vue b/src/components/Header/UserInfo.vue
@@ -55,7 +55,7 @@ export default class UserInfo extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .user-info-wrapper {
   display: flex;
   align-items: center;

diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
@@ -40,7 +40,7 @@ export default class Header extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import '../../assets/css/variable.scss';
+
 .page-header {
   display: flex;
   background-color: $--color-nav;

diff --git a/src/components/IconBtn/index.vue b/src/components/IconBtn/index.vue
@@ -41,7 +41,7 @@ export default class IconBtn extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .icon-btn {
   font-size: 22px;
   &.has-bg {

diff --git a/src/components/InputTag/index.vue b/src/components/InputTag/index.vue
@@ -94,7 +94,7 @@ export default class InputToTag extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .input-to-tag {
   width: 100%;
   border: 1px solid $--border-update-schedule;

diff --git a/src/components/Layout/index.vue b/src/components/Layout/index.vue
@@ -23,7 +23,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import '../../assets/css/variable.scss';
+
 .layout {
   width: 100%;
   height: 100vh;

diff --git a/src/components/SetDemo/index.vue b/src/components/SetDemo/index.vue
@@ -101,7 +101,6 @@ export default class SetDemo extends Vue {
 }
 </script>
 <style lang="scss">
-@import '@/assets/css/variable.scss';
 .set-demo {
   display: inline-flex;
   .btn {

diff --git a/src/components/SetSchedule/index.vue b/src/components/SetSchedule/index.vue
@@ -130,7 +130,7 @@ export default class SetSchedule extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 
 .schedule-form {
   &-label {

diff --git a/src/page/Home/index.vue b/src/page/Home/index.vue
@@ -139,7 +139,7 @@ export default class HomePage extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .home-page {
   width: 100%;
   height: calc(100vh - $page-header-height);

diff --git a/src/page/IframeImage/index.vue b/src/page/IframeImage/index.vue
@@ -80,7 +80,7 @@ export default class IframePage extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .cell-result-page {
   width: 100%;
   height: calc(100vh - $page-header-height);

diff --git a/src/page/Jobs/JobsTable/index.vue b/src/page/Jobs/JobsTable/index.vue
@@ -331,7 +331,7 @@ export default class JobsTable extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../../assets/css/variable.scss';
+
 .jobs-table-wrap {
   .job-id-wrap {
     display: flex;

diff --git a/src/page/Jobs/index.vue b/src/page/Jobs/index.vue
@@ -26,7 +26,7 @@ export default class JobPage extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+
 .jobs-page {
   .tab-wrap {
     margin-top: 10px;

diff --git a/src/page/Login/index.vue b/src/page/Login/index.vue
@@ -109,7 +109,7 @@ export default class Login extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../assets/css/variable.scss';
+// 
 #loginPage {
   .login-box {
     width: 500px;

diff --git a/src/page/Schedules/Dag/index.vue b/src/page/Schedules/Dag/index.vue
@@ -133,7 +133,7 @@ export default class DAG extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/css/variable.scss';
+
 
 .dag-wrap {
   padding: 36px 54px;

diff --git a/src/page/Schedules/Instance/index.vue b/src/page/Schedules/Instance/index.vue
@@ -454,7 +454,7 @@ export default class Instance extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../../assets/css/variable.scss';
+
 .instance-page {
   .page-inner-header {
     display: flex;

diff --git a/src/page/Schedules/Schedules/index.vue b/src/page/Schedules/Schedules/index.vue
@@ -397,7 +397,7 @@ export default class Schedules extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../../assets/css/variable.scss';
+
 .schedules-page {
   .btns-search {
     margin: 10px 0;

diff --git a/src/page/Workspace/DataCatalog/index.vue b/src/page/Workspace/DataCatalog/index.vue
@@ -270,7 +270,7 @@ export default class DataCataLog extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../../assets/css/variable.scss';
+
 .dataCatalog {
   width: 100%;
   height: 100%;

diff --git a/src/page/Workspace/Notebook/CellBox/index.vue b/src/page/Workspace/Notebook/CellBox/index.vue
@@ -362,7 +362,7 @@ export default {
 }
 </script>
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
 .cell-box {
   width: 100%;
   position: relative;

diff --git a/src/page/Workspace/Notebook/CellList/index.vue b/src/page/Workspace/Notebook/CellList/index.vue
@@ -1223,7 +1223,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
 .cellListPage {
   width: 100%;
   background-color: $--color-white;

diff --git a/src/page/Workspace/Notebook/CollapseCode/Editor.vue b/src/page/Workspace/Notebook/CollapseCode/Editor.vue
@@ -44,7 +44,7 @@ export default class CollapseCodeEditor extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../assets/css/variable.scss';
+
 .collapse-editor {
   background-color: #fff;
   font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
@@ -73,7 +73,7 @@ export default class CollapseCodeEditor extends Vue {
 }
 </style>
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
   // 颜色设置
   .hljs-comment, .hljs-constant.hljs-numeric {
     color: $cellCommentColor;

diff --git a/src/page/Workspace/Notebook/CollapseCode/index.vue b/src/page/Workspace/Notebook/CollapseCode/index.vue
@@ -44,7 +44,7 @@ export default class CollapseCode extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
 .collapse-code {
   padding-top: 19px;
   .code-btn {

diff --git a/src/page/Workspace/Notebook/ExcuteDetail/index.vue b/src/page/Workspace/Notebook/ExcuteDetail/index.vue
@@ -115,7 +115,7 @@ export default class ExcuteDetail extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
 .excute-detail {
   overflow: auto;
   .duration {

diff --git a/src/page/Workspace/Notebook/ExcuteResult/index.vue b/src/page/Workspace/Notebook/ExcuteResult/index.vue
@@ -232,7 +232,7 @@ export default class ExcuteResult extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
 .cell-excute-result {
   &-wrapper {
     position: relative;

diff --git a/src/page/Workspace/Notebook/FindAndReplace/index.vue b/src/page/Workspace/Notebook/FindAndReplace/index.vue
@@ -342,7 +342,7 @@ export default class FindAndReplace extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
 
 .find-and-replace {
   .dialog-title {

diff --git a/src/page/Workspace/Notebook/LogMessage/index.vue b/src/page/Workspace/Notebook/LogMessage/index.vue
@@ -113,7 +113,7 @@ export default class LogMessage extends Vue {
 }
 </script>
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
 .log-message {
   overflow: auto;
   &-list {

diff --git a/src/page/Workspace/Notebook/ShortcutDetail/index.vue b/src/page/Workspace/Notebook/ShortcutDetail/index.vue
@@ -76,7 +76,7 @@ export default class ShortcutDetail extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../assets/css/variable.scss';
+
 .shortcut-detail {
   .shortcut-sub-title {
     display: flex;

diff --git a/src/page/Workspace/Notebook/ShortcutItem/index.vue b/src/page/Workspace/Notebook/ShortcutItem/index.vue
@@ -71,7 +71,7 @@ export default class ShortcutItem extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../assets/css/variable.scss';
+
 .shortcut-item {
   margin: 9px 10px 9px 0;
   display: flex;

diff --git a/src/page/Workspace/Notebook/ShortcutPrompt/index.vue b/src/page/Workspace/Notebook/ShortcutPrompt/index.vue
@@ -41,7 +41,7 @@ export default class ShortcutPrompt extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../../../assets/css/variable.scss';
+
 
 .shortcut-prompt {
   .header {

diff --git a/src/page/Workspace/Workflow/components/ETNode/FormItem.vue b/src/page/Workspace/Workflow/components/ETNode/FormItem.vue
@@ -86,7 +86,7 @@ export default class FormItem extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../../../../assets/css/variable.scss';
+
 .form-code-editor {
   border: 1px solid #eee;
   border-radius: 4px;