This Plugin is not working with Vite 3.1.0

haozileung commented 2 years ago

This Plugin is not working with Vite 3.1.0. I think it's related to this commit

aizawasayo commented 2 years ago

+1，Do u know how to fix it？

rex-ll commented 2 years ago

+1

dearmark commented 2 years ago

+1

Carnia commented 2 years ago

+1

badlym commented 2 years ago

怎么解决啊,我也发现这个问题了 client.js:5

   Uncaught ReferenceError: __COLOR_PLUGIN_OUTPUT_FILE_NAME__ is not defined

dearmark commented 2 years ago

@badlym 召唤天降猛男

billydong1973 commented 2 years ago

怎么解决啊,我也发现这个问题了 client.js:5
   Uncaught ReferenceError: __COLOR_PLUGIN_OUTPUT_FILE_NAME__ is not defined

同问，怎么解决啊

ifzm commented 2 years ago

+1

badlym commented 2 years ago

现在解决办法是不用这个插件了,自己写,百度找一个antdesign替换主题的办法.

badlym commented 2 years ago

作者没时间维护了估计,钱已经赚够了,名气也打响了.还是自己想办法吧

lidianlei commented 2 years ago

+1

dearmark commented 2 years ago

作者没时间维护了估计,钱已经赚够了,名气也打响了.还是自己想办法吧

虽然有这个可能，但是我觉得作者可能生活或者工作上有大变化，还是Respect吧

yangliadmin commented 2 years ago

你们哪个大神是不是可以把这个包下载下来优化一下就行了，然后重新发布一个，项目里面再重新引用一下就好了

SingleDogNo1 commented 2 years ago

先说一下我的解决方案。讲的不好请多包涵。我使用 pnpm 安装依赖，node_nodules 文件夹下会有.pnpm文件夹。其他安装方式可以打开对应的依赖包操作。升级 vite 版本，然后打开 node_modules/.pnpm/vite-plugin-theme@0.8.6_vite@3.2.2/node_modules/vite-plugin-theme/es/client.js，修改

- const colorPluginOutputFileName = __COLOR_PLUGIN_OUTPUT_FILE_NAME__;
+ const colorPluginOutputFileName = '';
- const isProd = __PROD__;
+ const isProd =true;
- const colorPluginOptions = __COLOR_PLUGIN_OPTIONS__;
+ const colorPluginOptions = {}

即可。

问题出现在插件实现的逻辑。核心逻辑是生成好相应的 css 代码片段，然后保存成目标文件。然后通过字符串替换的方式把相应的文本插入到目标文件当中。具体逻辑对应/src/injectClientPlugin.ts80 行左右。

declare const __COLOR_PLUGIN_OPTIONS__: Options;
declare const __COLOR_PLUGIN_OUTPUT_FILE_NAME__: string;
declare const __ANTD_DARK_PLUGIN_OUTPUT_FILE_NAME__: string;
declare const __ANTD_DARK_PLUGIN_EXTRACT_CSS__: boolean;
declare const __ANTD_DARK_PLUGIN_LOAD_LINK__: boolean;
declare const __PROD__: boolean;

const colorPluginOutputFileName = __COLOR_PLUGIN_OUTPUT_FILE_NAME__;
const isProd = __PROD__;
const colorPluginOptions = __COLOR_PLUGIN_OPTIONS__;

先在目标文件中声明了一个colorPluginOutputFileName变量，然后将这个变量文本替换为最终生成好的代码。问题出在client/client.ts中。31-36 行，ts 没有编译这几个类型，但是保留了38 行之后的赋值，因此才出现了变量为定义的现象。结合上面我的理解，作者本意应该只是为了声明了一个初始值，目的就是用做之后重写用的，换句话说，这些初始值是什么本质上没有意义。虽然没从根本上解决，但还是希望能帮到大家。

blurries commented 2 years ago

修改vite.config.ts文件，通过环境变量定义临时解决

define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},

yangliadmin commented 2 years ago

nice

billydong1973 commented 2 years ago

很感谢以上提供的解决方案，目前可以运行了

tt-sevth commented 2 years ago

you can try replace "vite-plugin-theme": "^0.8.6" by "vite-plugin-theme": "github:tt-sevth/vite-plugin-theme" in package.json, then run pnpm up vite-plugin-theme.

Of course, I only use it in vite3, not tested in vite2. And you can also fork this project to your own repository and replace github:tt-sevth/vite-plugin-theme with you project url.

enjoy it :)

billydong1973 commented 2 years ago

good job.

ifzm commented 2 years ago

you can try replace "vite-plugin-theme": "^0.8.6" by "vite-plugin-theme": "github:tt-sevth/vite-plugin-theme" in package.json, then run pnpm up vite-plugin-theme.

Of course, I only use it in vite3, not tested in vite2. And you can also fork this project to your own repository and replace github:tt-sevth/vite-plugin-theme with you project url.

enjoy it :)

nice! 👍

lgcxc commented 1 year ago

修改vite.config.ts文件，通过环境变量定义临时解决
define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},
我按照你的方法试了一下还是不行呢

luchanan commented 1 year ago

修改vite.config.ts文件，通过环境变量定义临时解决
define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},
我按照你的方法试了一下还是不行呢

放在define里面呀

jiangqx95 commented 1 year ago

我按照这样改了后可以运行，但是vite 3.0.X 系统主题切换没问题，3.1.x、3.2.x系统主题切换就不行了，其他两个主题切换没问题，控制台没有任何报错，求助大佬呀

blurries commented 1 year ago

package.json package.txt 看看对比下版本

lgcxc commented 1 year ago

修改vite.config.ts文件，通过环境变量定义临时解决
define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},
我按照你的方法试了一下还是不行呢
放在define里面呀

谢谢了，看了配置明白了

jiangqx95 commented 1 year ago

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

kirklin commented 1 year ago

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

pnpm装这个 https://github.com/kirklin/vite-plugin-vben-theme

jiangqx95 commented 1 year ago

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

pnpm装这个 https://github.com/kirklin/vite-plugin-vben-theme

不行，访问直接报错

kirklin commented 1 year ago

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

pnpm装这个 https://github.com/kirklin/vite-plugin-vben-theme

不行，访问直接报错要用新的依赖，把原来的删除，然后全局替换vite-plugin-theme为@kirklin/vite-plugin-vben-theme "@kirklin/vite-plugin-vben-theme": "0.1.1",

再附上一份我的devDependencies

"devDependencies": { "@commitlint/cli": "^17.3.0", "@commitlint/config-conventional": "^17.3.0", "@iconify/json": "^2.1.146", "@iconify/utils": "^2.0.2", "@kirklin/eslint-config": "^0.2.1", "@kirklin/vite-plugin-vben-theme": "0.1.1", "@purge-icons/generated": "^0.9.0", "@types/codemirror": "^5.60.5", "@types/crypto-js": "^4.1.1", "@types/fs-extra": "^9.0.13", "@types/html-to-text": "^8.1.1", "@types/inquirer": "^8.2.5", "@types/intro.js": "^3.0.2", "@types/jest": "^27.5.2", "@types/lodash-es": "^4.17.6", "@types/mockjs": "^1.0.7", "@types/node": "^18.11.10", "@types/nprogress": "^0.2.0", "@types/qrcode": "^1.5.0", "@types/qs": "^6.9.7", "@types/showdown": "^1.9.4", "@types/sortablejs": "^1.15.0", "@vitejs/plugin-legacy": "^2.3.1", "@vitejs/plugin-vue": "^3.2.0", "@vitejs/plugin-vue-jsx": "^2.1.1", "@vue/compiler-sfc": "^3.2.45", "@vue/test-utils": "^2.2.4", "autoprefixer": "^10.4.13", "commitizen": "^4.2.5", "conventional-changelog-cli": "^2.2.2", "cross-env": "^7.0.3", "cz-git": "^1.3.12", "czg": "^1.3.12", "dotenv": "^16.0.3", "esbuild": "^0.13.15", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "esno": "^0.14.1", "fs-extra": "^10.1.0", "husky": "^8.0.2", "inquirer": "^8.2.5", "jest": "^27.5.1", "less": "^4.1.3", "lint-staged": "12.3.7", "npm-run-all": "^4.1.5", "picocolors": "^1.0.0", "pnpm": "^7.17.1", "postcss": "^8.4.19", "postcss-html": "^1.5.0", "postcss-less": "^6.0.0", "prettier": "^2.8.0", "rimraf": "^3.0.2", "rollup": "^2.79.1", "rollup-plugin-visualizer": "^5.8.3", "ts-jest": "^27.1.5", "ts-node": "^10.9.1", "typescript": "^4.9.3", "unplugin-auto-import": "^0.11.5", "vite": "^3.2.4", "vite-plugin-compression": "^0.5.1", "vite-plugin-html": "^3.2.0", "vite-plugin-imagemin": "^0.6.1", "vite-plugin-mkcert": "^1.10.1", "vite-plugin-mock": "^2.9.6", "vite-plugin-purge-icons": "^0.8.2", "vite-plugin-pwa": "^0.13.3", "vite-plugin-style-import": "^2.0.0", "vite-plugin-svg-icons": "^2.0.1", "vite-plugin-vue-setup-extend": "^0.4.0", "vite-plugin-windicss": "^1.8.8", "vue-eslint-parser": "^8.3.0", "vue-tsc": "^0.33.9" },

zhunnyWang commented 1 year ago

带来次变化的更新为https://github.com/vitejs/vite/pull/9848。此更新自动为未优化的node_modules 导入加入hash值，因为该插件的tranform中的路径匹配方法失效。匹配不到正确路径，自然目标文件得不到更改，变量赋初始值就没办法生效。最简单的改法，找的vite-plugin-theme打包后的transform方法，替换原有的路径匹配方法，endsWith替换为includes： if (nid === CLIENT_PUBLIC_ABSOLUTEPATH || nid.includes(path6) || nid.includes(path6.replace(/\//gi, "")))

ma-lihui commented 1 year ago

带来次变化的更新为https://github.com/vitejs/vite/pull/9848。此更新自动为未优化的node_modules 导入加入hash值，因为该插件的tranform中的路径匹配方法失效。匹配不到正确路径，自然目标文件得不到更改，变量赋初始值就没办法生效。最简单的改法，找的vite-plugin-theme打包后的transform方法，替换原有的路径匹配方法，endsWith替换为includes： if (nid === CLIENT_PUBLIC_ABSOLUTEPATH || nid.includes(path6) || nid.includes(path6.replace(///gi, "")))

亲测可行，具体做法，通过pnpm patch打补丁

pnpm patch vite-plugin-theme@0.8.6

会提示一个文件路径，修改提示路径下的dist/index.js 23251行修改完后运行命令行中提示的 pnpm patch-commit

qiaochangwei commented 1 year ago

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

pnpm装这个 https://github.com/kirklin/vite-plugin-vben-theme

麻烦问一下这个插件在vben v2.10.0支持嘛？有试过嘛？

kirklin commented 1 year ago

支持的哈

qiaochangwei commented 1 year ago

支持的哈刚刚试了一波，可行。支持一波，感谢。

github-ZH-cn commented 1 year ago

作者没时间维护了估计,钱已经赚够了,名气也打响了.还是自己想办法吧

写插件可以赚钱?

Yuliang-Lee commented 8 months ago

https://www.npmjs.com/package/@xlaoyu/vite-plugin-theme 修改了问题发布了一个包

Loveyless commented 8 months ago

修改vite.config.ts文件，通过环境变量定义临时解决
define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},

nice bro thx

vbenjs / vite-plugin-theme

This Plugin is not working with Vite 3.1.0 #27