⬆️ 升级 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>
<style lang="scss" scoped>
$z-index-top: 99999;
$white: #fff;
<style lang="less" scoped>
@z-index-top: 99999;
@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 {
top: 0;
@ -60,12 +60,12 @@
height: 100%;
position: fixed;
overflow: hidden;
z-index: $z-index-top;
z-index: @z-index-top;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: $white;
background-color: @white;
@keyframes error-item {
0% {
@ -82,8 +82,8 @@
> .error-code,
> .error-link,
> .error-wrapper-message {
color: $black-light;
animation: error-item ease-out both .6s $transition-time-slow;
color: @black-light;
animation: error-item ease-out both .6s @transition-time-slow;
text-shadow: 5px 5px 5px #616161;
}
@ -113,18 +113,18 @@
.error-image {
width: 28rem;
animation: error-item ease-out both .6s $transition-time-slow;
animation: error-item ease-out both .6s @transition-time-slow;
}
.error-code {
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;
font-size: 5em;
text-shadow: 5px 5px 5px #616161;
}
.link {
color: $black-light;
color: @black-light;
}
</style>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -19,44 +19,44 @@ export default {
_initEditor(data) {
let _ts = this;
let toolbar = [
'emoji',
'headings',
'bold',
'italic',
'strike',
'link',
'|',
'list',
'ordered-list',
'check',
'outdent',
'indent',
'|',
'quote',
'line',
'code',
'inline-code',
'insert-before',
'insert-after',
'|',
'upload',
// 'record',
'table',
'|',
'undo',
'redo',
'|',
'edit-mode',
{
name: 'more',
toolbar: [
'fullscreen',
'both',
'preview',
'info'
],
}]
let toolbar = [
'emoji',
'headings',
'bold',
'italic',
'strike',
'link',
'|',
'list',
'ordered-list',
'check',
'outdent',
'indent',
'|',
'quote',
'line',
'code',
'inline-code',
'insert-before',
'insert-after',
'|',
'upload',
// 'record',
'table',
'|',
'undo',
'redo',
'|',
'edit-mode',
{
name: 'more',
toolbar: [
'fullscreen',
'both',
'preview',
'info'
],
}]
return new Vue.Vditor(data.id, {
toolbar,
mode: 'wysiwyg',
@ -117,15 +117,15 @@ export default {
}
</script>
<style lang="scss">
@import "~vditor/src/assets/scss/index.scss";
<style lang="less">
@import "~vditor/src/assets/less/index.less";
.guides__wrapper {
max-width: 1200px;
margin: 0 auto;
display: block;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
.guides__wrapper {
max-width: 1200px;
margin: 0 auto;
display: block;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
</style>

View File

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

View File

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

1013
yarn.lock

File diff suppressed because it is too large Load Diff