search

mzohaibqc / antd-theme-generator

This script is to generate color.less file to update color related css in browser.
https://mzohaibqc.github.io/antd-theme-generator/
358 stars 87 forks source link

can it support vue3.0+vite+ant-design-vue@2.0.0-beta.10 #62

Open xch752 opened 3 years ago

xch752 commented 3 years ago

Describe the bug I can use antd-theme-generator in vue2.x & ant-design-vue@1.6.5 but it dosent'work on vue3.0 & ant-design-vue@2.0.0-beta.10 Show your code

it works

"scripts": {
    "serve": "node color && vue-cli-service serve --mode dev",
    "build": "node color && vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "^1.6.5",
    "antd-theme-generator": "^1.2.6",
    "core-js": "^3.6.5",
    "less": "^2.7.3",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^2.7.3",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  },

not work

"scripts": {
    "start": "node color && vite",
    "dev": "node color && vite",
    "build": "vite build"
  },
"dependencies": {
    "ant-design-vue": "^2.0.0-beta.10",
    "vue": "^3.0.0-rc.1",
    "vue-i18n": "^9.0.0-beta.4",
    "vue-router": "^4.0.0-beta.2",
    "vuex": "^4.0.0-beta.4"
  },
  "devDependencies": {
    "antd-theme-generator": "^1.2.6",
    "@intlify/vite-plugin-vue-i18n": "^1.0.0-alpha.2",
    "@vue/compiler-sfc": "^3.0.0-rc.1",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.2",
    "typescript": "^4.0.3",
    "vite": "^1.0.0-rc.1",
    "less": "^2.7.3",
    "less-loader": "^5.0.0"
  }

Screenshots If applicable, add screenshots to help explain your problem.

Version Which version is installed in your application? Try using the latest version, that may help

xch752 commented 3 years ago

Both of two projects have {window.less} and use {window.less.modifyVars} successfully. The high version project doesn't change the css ,But lower one works.

mzohaibqc commented 3 years ago

I've to look into directory structure of ant-design-vue package inside node_modules.

Ant Design (React) has this structure

antd | lib | style (this is important) | button | date-picker | slider | more .... | dist

antd/lib/style contains themes and variables files e.g. antd/lib/style/themes/default.less

So if ant-design-vue does not have that struture then you can pass a configuration prop andStylesDir which should pint to a folder/directory which contains style and other component directories then it will work.

If you can create a sample public project which I can clone and test, that can help me to find out the problem and fix it.