⬆️ 升级 vditor,使用 less 替换 sass

This commit is contained in:
ronger 2022-05-23 12:56:16 +08:00
parent 95b87bc53a
commit be4e4f17c6
13 changed files with 282 additions and 901 deletions

View File

@ -43,15 +43,15 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
$z-index-top: 99999; @z-index-top: 99999;
$white: #fff; @white: #fff;
$module-bg: var(rgba($white, 0.6)); @module-bg: var(rgba(@white, 0.6));
$black-light: #555555; @black-light: #555555;
$transition-time-slow: .38s; @transition-time-slow: .38s;
.error { .error {
top: 0; top: 0;
@ -60,12 +60,12 @@
height: 100%; height: 100%;
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
z-index: $z-index-top; z-index: @z-index-top;
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: $white; background-color: @white;
@keyframes error-item { @keyframes error-item {
0% { 0% {
@ -82,8 +82,8 @@
> .error-code, > .error-code,
> .error-link, > .error-link,
> .error-wrapper-message { > .error-wrapper-message {
color: $black-light; color: @black-light;
animation: error-item ease-out both .6s $transition-time-slow; animation: error-item ease-out both .6s @transition-time-slow;
text-shadow: 5px 5px 5px #616161; text-shadow: 5px 5px 5px #616161;
} }
@ -113,18 +113,18 @@
.error-image { .error-image {
width: 28rem; width: 28rem;
animation: error-item ease-out both .6s $transition-time-slow; animation: error-item ease-out both .6s @transition-time-slow;
} }
.error-code { .error-code {
text-transform: uppercase; text-transform: uppercase;
animation: error-item ease-out both .6s $transition-time-slow; animation: error-item ease-out both .6s @transition-time-slow;
color: #616161; color: #616161;
font-size: 5em; font-size: 5em;
text-shadow: 5px 5px 5px #616161; text-shadow: 5px 5px 5px #616161;
} }
.link { .link {
color: $black-light; color: @black-light;
} }
</style> </style>

View File

@ -16,24 +16,24 @@
"cookieparser": "^0.1.0", "cookieparser": "^0.1.0",
"echarts": "^4.9.0", "echarts": "^4.9.0",
"element-ui": "^2.15.8", "element-ui": "^2.15.8",
"express": "^4.17.3", "express": "^4.18.1",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"net": "^1.0.2", "net": "^1.0.2",
"nuxt": "^2.15.8", "nuxt": "^2.15.8",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",
"save-svg-as-png": "^1.4.17", "save-svg-as-png": "^1.4.17",
"simple-icons": "^6.19.0", "simple-icons": "^6.23.0",
"sockjs-client": "^1.6.0", "sockjs-client": "^1.6.0",
"stompjs": "^2.3.3", "stompjs": "^2.3.3",
"vditor": "^3.8.13", "vditor": "^3.8.14",
"vue-cropperjs": "^4.2.0", "vue-cropperjs": "^4.2.0",
"vuejs-avataaars": "^4.0.1" "vuejs-avataaars": "^4.0.1"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/proxy": "^2.1.0", "@nuxtjs/proxy": "^2.1.0",
"lodash-webpack-plugin": "^0.11.6", "less": "^4.1.2",
"node-sass": "^5.0.0", "less-loader": "^7.0.0",
"sass-loader": "^10.2.0" "lodash-webpack-plugin": "^0.11.6"
} }
} }

View File

@ -156,8 +156,8 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
.article__wrapper { .article__wrapper {
margin: 20px auto; margin: 20px auto;

View File

@ -400,6 +400,6 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
</style> </style>

View File

@ -407,8 +407,8 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
.preview-area { .preview-area {
width: 16rem; width: 16rem;

View File

@ -432,8 +432,8 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
.article__wrapper { .article__wrapper {
max-width: 980px; max-width: 980px;

View File

@ -428,6 +428,6 @@
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
</style> </style>

View File

@ -205,8 +205,8 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
.from-message { .from-message {
float: right; float: right;

View File

@ -166,8 +166,8 @@
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
.article__wrapper { .article__wrapper {
max-width: 980px; max-width: 980px;

View File

@ -117,15 +117,15 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
.guides__wrapper { .guides__wrapper {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
box-sizing: border-box; box-sizing: border-box;
} }
</style> </style>

View File

@ -117,8 +117,8 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
.guides__wrapper { .guides__wrapper {
max-width: 1200px; max-width: 1200px;

View File

@ -435,8 +435,8 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "~vditor/src/assets/scss/index.scss"; @import "~vditor/src/assets/less/index.less";
.preview-area { .preview-area {
width: 16rem; width: 16rem;

1013
yarn.lock

File diff suppressed because it is too large Load Diff