开启treeshake后Vuetify主题色被替换了

azhu003 commented 3 years ago

在this.$message.success('asdadsdad')前primary颜色正常，调用之后被修改为蓝色

plugins

import Vue from 'vue'
import message from 'vuetify-message-snackbar'
import Vuetify, {VSnackbar, VIcon, VBtn} from 'vuetify/lib'

Vue.use(Vuetify)
Vue.component('v-snackbar', VSnackbar)
Vue.component('v-btn', VBtn)
Vue.component('v-icon', VIcon)

const MessageOption = {
  app: true,
  top: true,
  right: true,
  vertical: true,
}
Vue.use(message, MessageOption)

nuxt.config.js

vuetify: {
    treeShake: true,
    customVariables: [
      '~/assets/styles/variables.scss',
    ],
    theme: {
      dark: false,
      options: {customProperties: true},
      themes: {
        dark: {
          primary: {
            base: '#E2088A',
            darken1: '#DF028E',
            darken2: '#FF4E4E',
          },
        },
        light: {
          // 主色调
          primary: {
            base: '#E2088A',
            darken1: '#DF028E',
            darken2: '#FF4E4E',
          },
        },
      },
    },
  },

thinkupp commented 3 years ago

方便具体描述一下？受影响的是所有vuetify组件的primary影响了还是指？方便的话可以前后截个对比图

azhu003 commented 3 years ago

所有使用了color="primary"属性的组件

<v-btn color="primary" depressed outlined :ripple="false" v-text="btn"
             @click="$message.success('asdadsdad')" />

调用前

调用后会恢复成vuetify默认的主色

thinkupp commented 3 years ago

好的，我在web下没有复现，空下来了搭个Nuxt工程排查一下这个库并不会侵入css，理论上不应该影响样式上的表现，建议你这边审查一下元素，前后对比一下看看区别是什么，定位下问题或者你方便的话把你的项目模板放到git上我拉一下

azhu003 commented 3 years ago

啊... 是因为设置了 treeShake: true 的原因 https://github.com/azhu003/nuxtjs-vuetify-snackbar-example

thinkupp commented 3 years ago

还需要帮你看这个问题吗

azhu003 commented 3 years ago

CSS覆盖不了，大佬有什么更好的解决办法吗，不想全量引入，只用了一部分的组件

skadiD commented 3 years ago

我也是使用treeshake之后自定义主题色被替换了，而且不是nuxt

skadiD commented 3 years ago

会不会是因为使用treeshake后导致css的优先度不同

azhu003 commented 3 years ago

我也是使用treeshake之后自定义主题色被替换了，而且不是nuxt

就是因为treeshake这个

skadiD commented 3 years ago

有什么解决的方案吗，我尝试存储颜色配置在localstorge也不行

skadiD commented 3 years ago

@thinkupp 我pr了一个临时的解决方案，或许是个思路 #8 既然插件中重新new了一个vuetify，为什么不能传递已有的vuetify对象呢但是奇怪的是解决了主题覆盖问题，消息条现在是在v-main顶部显示可能还需要优化

thinkupp commented 3 years ago

不好意思，前段时间有点忙没顾上追了下源码，在开启treeShake以后，nuxt会在setupBuild的时候引入vuetify-loader，vuetify的入口也会变成"vuetify/lib"，但是呢，vuetify-message-snackbar这个库里的vuetify入口还是"vuetify"，也就是指向dist目录下的完整文件，所以我觉得用了这个库以后你开不开这个选项应该没区别了，我没试，这点你们可以打个包验证下这个问题不算是主题覆盖，是每次初始化vuetify都会把依赖的style重写掉。在初始化的时候会根据传参和一个默认参数进行合并，这里可能是vuetify的bug，合并处理参数深拷贝的时候有点问题导致默认参数的值被改变了，所以之后插件实例化vuetify时没传参数就算主题色也没变。所以不开treeShake就没问题，就是因为插件和项目里引用的vuetify入口是一个，引用的默认参数也是一个，开了treeShake以后入口不同

thinkupp commented 3 years ago

@skadiD 我有点纳闷的是你不是nuxt环境为什么会用到treeShake，我看vuetify的README里这个属性是针对nuxt环境的吧，能发个demo看下代码吗

skadiD commented 3 years ago

我看即使vuetify-message-snackbar库中vuetify没有指向vuetify/lib，打包后的大小也没有增加

skadiD commented 3 years ago

@skadiD 我有点纳闷的是你不是nuxt环境为什么会用到treeShake，我看vuetify的README里这个属性是针对nuxt环境的吧，能发个demo看下代码吗

使用treeShake后运行时环境可以精简很多的treeShake 要不是vuetify3还没做好，使用vite应该比treeShake效果更好

thinkupp commented 3 years ago

@skadiD 我有点纳闷的是你不是nuxt环境为什么会用到treeShake，我看vuetify的README里这个属性是针对nuxt环境的吧，能发个demo看下代码吗

使用treeShake后运行时环境可以精简很多的treeShake 要不是vuetify3还没做好，使用vite应该比treeShake效果更好

这还真不清楚，我全局搜了下代码里只有nuxt下有treeShake相关的代码

thinkupp commented 3 years ago

@thinkupp 我pr了一个临时的解决方案，或许是个思路 #8 既然插件中重新new了一个vuetify，为什么不能传递已有的vuetify对象呢但是奇怪的是解决了主题覆盖问题，消息条现在是在v-main顶部显示可能还需要优化

感谢PR，现在解决办法最好的应该就是通过传参解决了

skadiD commented 3 years ago

传参确实是个不错的方法，但是会导致dark的覆盖。在传递dark参数值时候并不是动态传入的，目前我还没有想出比较优美的解决方法，只能手动修改ts文件在new vuetify时候从localstorge读取现在是否是dark模式

不是很懂ts，或许可以传参一个匿名函数进去？

thinkupp commented 3 years ago

尚不明确问题发生的原因，Nuxt环境我用楼主的demo能复现，web下我本地试了试没法复现这个问题，你能提供一份可复现的代码么

skadiD commented 3 years ago

正在跑个精简版的demo，我猜测是主体vuetify对象监听dark参数的变化，但是并没有一个回调函数将dark的变化传递到vuetify-message-snackbar中的vuetify对象里

skadiD commented 3 years ago

demo 确实是这样，动态修改dark值，只会引起全局vuetify对象的变化，而变化后参数中的dark值没有办法更新/再次传递到vuetify-message-snackbar中的vuetify对象

thinkupp commented 3 years ago

我看了demo，还是没明白痛点是什么，是想动态改变snackbar的dark属性吗？

skadiD commented 3 years ago

就是动态改变了全局的dark属性，再使用snackbar会覆盖成最初传入的dark/light所对应的theme

举个例子最初dark属性设定为false，全局使用light模板，传参使用的snackbar可以正常使用，但是动态修改dark属性为true，true值无法提交到snackbar中，导致snackbar在new vuetify()仍然是false，继而将light模式下的颜色覆盖到全局中

thinkupp commented 3 years ago

可以这样试试： this.$message.dark(this.$vuetify.theme.dark).success("dark");

thinkupp commented 3 years ago

还有一个解决方法，在初始化插件的时候把实例传进来，初始化参数那里的配置项改成实例好了，一会我加一下

skadiD commented 3 years ago

嗯这个确实可以

我怎么就没注意到还有个dark

skadiD commented 3 years ago

还有一个解决方法，在初始化插件的时候把实例传进来，初始化参数那里的配置项改成实例好了，一会我加一下

嗯我现在就是这么做的

thinkupp commented 3 years ago

看下README，基本上所有snackbar的属性都可以动态修改

thinkupp commented 3 years ago

@azhu003 楼主更新版本试试，看下README的用法，有点简陋晚点补充详细，希望你还没放弃这个插件 @skadiD https://github.com/thinkupp/vuetify-message-snackbar#%E6%A0%B7%E5%BC%8F%E8%A1%A8%E7%8E%B0%E4%B8%8D%E4%B8%80%E8%87%B4%E7%9A%84%E9%97%AE%E9%A2%98

azhu003 commented 3 years ago

👍

cgc2109748 commented 3 years ago

@azhu003 楼主更新版本试试，看下README的用法，有点简陋晚点补充详细，希望你还没放弃这个插件 @skadiD https://github.com/thinkupp/vuetify-message-snackbar#%E6%A0%B7%E5%BC%8F%E8%A1%A8%E7%8E%B0%E4%B8%8D%E4%B8%80%E8%87%B4%E7%9A%84%E9%97%AE%E9%A2%98

可以具体解释一下”Nuxt项目传入配置项或者在created时动态设置“这是如何配置吗？我尝试了很久都没找到方法

skadiD commented 3 years ago

传递实例化的vuetify对象

cgc2109748 commented 3 years ago

传递实例化的vuetify对象

在nuxt里只能通过nuxt.config.js去做配置。没法在实例化的时候做干预啊。。

thinkupp / vuetify-message-snackbar

开启treeshake后Vuetify主题色被替换了 #7