search

GitOfZGT / vite-plugin-theme-preprocessor

css theme preprocessor plugin for vite
MIT License
161 stars 15 forks source link

编译后样式失常 #19

Closed transtone closed 2 years ago

transtone commented 2 years ago

dev开发环境下面包屑和提示框的样式都是正常的，但编译后就不正常了，黑色主题显示白色的样式。

GitOfZGT commented 2 years ago

这个要提供demo看看， 因为主题打包抽取了独立文件有可能会打乱顺序导致权重问题

我先看看我那个demo的有没出现异常的组件

transtone commented 2 years ago

https://github.com/transtone/-vite-plugin-theme-preprocessor-debug 这是一个可以复现问题的demo，用 serve dist 看，和 yarn dev 看效果不一样，dev下是正常的。

能不能帮忙看看这里的配置是否正常？

感觉整个 .theme-dark 的主题都没有。 image

这个样式在 build 打包之后看不到，不是被覆盖，是完全找不到。

theme-dark.css 文件在，但似乎没有被引入。

image

果然只引入了一个。

GitOfZGT commented 2 years ago

https://github.com/transtone/-vite-plugin-theme-preprocessor-debug 这是一个可以复现问题的demo，用 serve dist 看，和 yarn dev 看效果不一样，dev下是正常的。

能不能帮忙看看这里的配置是否正常？

你的vite.config.js 没有 extract:false ， 因为它默认是true， 不想抽取就false image

你可以引入我写好的 toggleTheme 就不用考虑了，都处理好的了 image

这里 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils"; 路径应该optimizeDeps.exclude的路径相同，文档多了".js"

GitOfZGT commented 2 years ago

果然只引入了一个。

抽取到独立的css文件，只引入一个是正常，每次toggleTheme就需要加载对应的css文件哦

transtone commented 2 years ago

必须用 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils" 这个方法，否则无效。建议在文档中强调一下。

GitOfZGT commented 2 years ago

必须用 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils" 这个方法，否则无效。建议在文档中强调一下。

也不是必须用，只是提供了默认可用的方法