chenshuai2144 / umi-plugin-antd-theme Goto Github PK

View Code? Open in Web Editor NEW

86.0 2.0 29.0 47 KB

🎨 Best theme plugin

Home Page: https://preview.pro.ant.design/

License: MIT License

TypeScript 100.00%

umi theme antd ant-design antdpro ant-design-pro

umi-plugin-antd-theme's Introduction

umi-plugin-antd-theme

Usage

Configure in config/theme.config.json,

{
  "theme": [
    {
      "theme": "dark",
      "fileName": "dark.css"
    },
    {
      "fileName": "mingQing.css",
      "modifyVars": {
        "@primary-color": "#13C2C2"
      }
    }
  ],
  // 是否压缩css
  "min": true,
  // css module
  "isModule": true,
  // 忽略 antd 的依赖
  "ignoreAntd": false,
  // 忽略 pro-layout
  "ignoreProLayout": false,
  // 不使用缓存
  "cache": true
}

you can get config in window.umi_plugin_ant_themeVar

LICENSE

MIT

umi-plugin-antd-theme's People

Contributors

Stargazers

Watchers

umi-plugin-antd-theme's Issues

How can I avoid this error 'ERR_INVALID_ARG_TYPE'?

I am using Ant.Design Pro V4
according to what I have read in the documentation a configuration file is all that is required.

//themePluginConfig.js

export default {
   theme: [
       {
         fileName: 'theme1.css',
         key: 'theme1',
         modifyVars: {
           '@ primary-color': '# 13C2C2',
           '@ menu-dark-color': '# 324444',
           '@ menu-dark-bg': '# 5A5A5A',
         },
       },
     {
       fileName: 'theme2.css',
       key: 'theme2',
       modifyVars: {
         '@ primary-color': '# 4992BF',
         '@ menu-dark-color': '# 9B9B9B',
         '@ menu-dark-bg': '# 3A3A3A',
       },
     },
   ],
};

I would really appreciate if someone could help me
Thanks you!

配置文件改为 json 格式后，无法配置 filterFileLess

之前 1.x 版本里，可以在使用插件时，配置 filterFileLess 方法，过滤掉一些不需要参与编译的 less 文件，现在 2.x 改为 json 的配置项后，无法配置这个配置了。

我看 antd-pro-merge-less 库中，还是有对 filterFileLess 这个参数的支持的。

建议同时支持 json 或 js 配置项的支持。

执行 umi build ，dist 目录未生成 theme 相关文件，控制台报错

项目地址
umi dev 可以生成主题文件
umi build 产生错误信息如下：

使用umi用global.less时@primary-color不能随着主题切换颜色

ant-design/ant-design-pro#3020 @primary-color 默认一直是蓝色

umi-plugin-antd-theme 如果变量引入的是图片资源，在 network disabled cache 的条件下会重复加载

重现步骤：

声明图片资源变量并:global 方式使用变量
chrome network 设为disabled
resize 窗口
network 可观察到资源反复加载，导致引用图片资源的样式闪动

// src/global.less
@import '~antd/es/style/themes/default.less';
html,
body,
#root {
  height: 100%;
  --bg: url('@/assets/bg.jpg');
}

// src/pages/Welcome.less
@import '~antd/lib/style/themes/default.less';
.pre {
  margin: 12px 0;
  padding: 12px 20px;
  background: @input-bg;
  box-shadow: @card-shadow;
}
:global {
  .ant-layout {
    background: var(--bg);
  }
}

umi3版本下，开发时每次修改代码都会导致theme build，效率低下

umi3版本下，开发时每次修改代码都会导致theme build，效率太低。
能否开放配置，不自动使用theme build

absNodeModulesPath怎么自定义配置

我把antd pro套在egg里面， node moule就放在外面管理了，但是run 的时候出现路径错误，看了下这个插件的源码，貌似是absNodeModulesPath这个变量导致的

使用ant-design-pro脚手架v4-migration分支，window.umi_plugin_ant_themeVar为空

antd-pro-merge-less\\.temp\\antd.less中的fade方法编译不过

编译的时候antd.less报错LessError: variable @btn-padding-sm is undefined，生成的样式文件里边是undefined

组件环境

"antd": "^4.0.2"
"@ant-design/pro-layout": "^5.0.6",
"@ant-design/pro-table": "^2.1.7",
"umi": "^3.0.0",
"umi-plugin-antd-theme": "^2.1.1"

配置数据

默认数据，即 https://github.com/chenshuai2144/umi-plugin-antd-theme/blob/master/src/defaultTheme.ts 内容

问题表现

ProTable 的内容不受 Dark 主题影响，还是浅色的；

期望结果

ProTable 的颜色和设置同步；

参考

在 umi3 的配置中，设置为 antd: {dark: true} 后不存在上面的问题，见下图：

Set default language english !

when I load the page it shows the Chinese language how do I

set the by default English language

What happens?

配置theme.config.js 得到的新的css文件中没有对某些路径进行处理

例如

.test {
  background-image: url(../assets/bg2.svg);
}

通过umi配置正常打包会生成

.antd-pro-pages-index-test {
    background-image: url(./static/bg2.a54dfde0.svg);
}

而通过插件新生成的css中对路径并没有处理

.antd-pro-pages-index-test {
    background-image:url(../assets/bg2.svg);
}

Mini Showcase Repository(REQUIRED)

N.A.

How To Reproduce

N.A.

Context

Umi Version: 3.2.22
Node Version: 14.4.0
Platform: OSX

theme

你好，我在ant-design-pro里面是可以使用umi-plugin-antd-theme切换主题颜色的，但是我在ant-design-mobile里面使用是不行的，生成的样式名称和antd-mobile不对应，我想问下，这里有需要什么地方配置吗？还是这个插件暂时不支持antd-mobile 或者说还有其他插件来支持。麻烦看到 Issues 回复下，谢谢

🧐 问题描述

在打包dist的时候配置了本地不同的主题，现在有个主题里面的图片路径没有进行编译,导致背景图无法加载

💻 示例代码

.mainStyle {
width: 100vw;
height: 100vh;
color: rgb(255, 255, 255);
background-image: url('../../../assets/img/waf/wafbg.jpg');
background-repeat: no-repeat;
background-size: cover;
}

怎么才能让编译的主题样式也是/static/wafbg.81fd989b.jpg

🚑 其他信息

很多情况主题的less变量是服务端获取过来的，变量这么写死在前端不合适

umi@3 版本下生成的.plugin-theme/theme下的css文件全部为空

重现repo: https://github.com/thundersdata-frontend/spa-template

本地环境切换theme时, 请求链接类似 Request URL: http://localhost:8000/theme/aliyun.css
部署在服务器上时, 切换时请求css文件的链接会是 Request URL: https://1.1.1.1/theme/aliyun.css
但是由于umi部署到非根目录
base: '/new/',
publicPath: '/new/',
cssPublicPath: '/new/',里了,
所以在服务器环境应该请求https://1.1.1.1/new/theme/aliyun.css才能请求到
所以请问, 这个是不是缺少对应的配置方法?

less building error: SyntaxError: (postcss) CssSyntaxError Unknown word (14662:1)

https://github.com/ant-design/ant-design/blob/master/components/input-number/style/index.less

@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';

INFO 💄 build theme
🔩 less render start!
SyntaxError: (postcss) CssSyntaxError Unknown word (14662:1)
14660 | ;
14661 |

14662 | @input-number-prefix-cls: ~'@{ant-prefix}-input-number';
| ^
14663 |
14664 | @input-number-wrapper-cls: @input-number-prefix-cls, ~'@{input-number-prefix-cls}-affix-wrapper';
14665 |

生成的主题文件，例如green.css 不带hash值，缓存问题如何解决

想问下 umi 开发插件有相关文档教程吗

不知道开发后怎么本地验证，在官网只找到了 https://v2.umijs.org/zh/plugin/develop.html，没有写怎么调试相关的

谢谢

build theme error @ant-prefix is undefined

e.g:
[LessError: variable @ant-prefix is undefined] {
message: 'variable @ant-prefix is undefined',
stack: undefined,
type: 'Name',
filename: 'E:\testProject\react-init-project\node_modules\_antd-pro-merge-less@2.0.12@antd-pro-merge-less\.temp\antd.less',
index: 115,
line: 4,
column: 7,
callLine: NaN,
callExtract: undefined,
extract: [
' @import "../color/tinyColor";',
' .@{ant-prefix}-affix {',
' z-index: @zindex-affix;'
]

[BUG]只安装生产依赖，打包后报错

大佬你好，我关注到你在 https://gitmemory.com/issue/ant-design/ant-design-pro/7126/671048471 这个问题里面的关于umi命令报错问题的回答，被认为是有用的。目前我也碰到的类似的问题，但是不明白您但是的回答是什么意思，回答内容是：“额，脚手架项目的生产和开发分界线不明显，一般开发里面的都是webpack和node系的，最好全部安装。umi有些插件是runtime和node公用的”。这句话的意思是node和webpack都要安装吗，如果您有时间回复的话真是太感谢了。

这个插件能够运用在roadhog上吗？

我们现在还在使用之前dva+roadhog这套，想问下在roadhog或webpack上如何使用

这是什么问题？ api.addMiddewares is not a function

ant.less里面有个darken方法不识别，build不起来，紧急

我没有在代码的任何地方使用过darken和这几个变量，但是ant.less却报这个错

[email protected]，根据官方文档添加，报错了

[email protected] start /Users/doudou/ccp_front/holmes/ccp_frontend_demo
cross-env APP_TYPE=site umi dev

🚀 Starting Umi UI using [email protected]...
⛽️ Ready on http://localhost:3000/
/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_umi-build-dev@1.18.5@umi-build-dev/lib/Service.js:182
throw new Error(e);
^

Error: Error: Plugin /Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/umi-plugin-antd-theme/lib/index.js execute failed

Cannot find module 'antd/dist/dark-theme'
Require stack:

/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_@[email protected]@@ant-design/dark-theme/index.js
/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_antd-pro-merge-less@3.0.10@antd-pro-merge-less/index.js
/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_umi-plugin-antd-theme@2.1.2@umi-plugin-antd-theme/lib/index.js
/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_umi-build-dev@1.18.5@umi-build-dev/lib/getPlugins.js
/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_umi-build-dev@1.18.5@umi-build-dev/lib/Service.js
/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_umi@2.13.13@umi/lib/scripts/realDev.js
at Service.resolvePlugins (/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_umi-build-dev@1.18.5@umi-build-dev/lib/Service.js:182:15)
at new Service (/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_umi-build-dev@1.18.5@umi-build-dev/lib/Service.js:156:25)
at Object. (/Users/doudou/ccp_front/holmes/ccp_frontend_demo/node_modules/_umi@2.13.13@umi/lib/scripts/realDev.js:49:25)
at Module._compile (internal/modules/cjs/loader.js:774:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)
at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: cross-env APP_TYPE=site umi dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/doudou/.tnpm/_logs/2020-06-09T08_13_23_372Z-debug.log
[tnpm] subprocess:/usr/local/lib/node_modules/tnpm/lib/npm_child_process.js exit code: 1, signal: null

参考的文档地址https://pro.ant.design/docs/dynamic-theme-cn
里面的v2版本方式

plugin里添加umi-plugin-antd-theme后报错

[
  "umi-plugin-antd-theme",
  {
    theme: [
      {
        key: "light",
        fileName: "light.css",
        theme: "light",
        modifyVars: {
          "@primary-color": "#0FCD8C",
          "@btn-primary-color": "#01081E",
          "@tooltip-color": "rgba(0,0,0,0.65)",
          "@tooltip-bg": "#FFF",
          "@kc-limit-width": "1200px",
          "@kc-mb-width": "600px"
        }
      },
      {
        key: "dark",
        fileName: "dark.css",
        theme: "dark",
        modifyVars: {
          "@primary-color": "#0FCD8C",
          "@btn-primary-color": "#01081E",
          "@tooltip-color": "rgba(0,0,0,0.65)",
          "@tooltip-bg": "#FFF",
          "@kc-limit-width": "1200px",
          "@kc-mb-width": "600px"
        }
      }
    ]
  }
];

Cannot find module 'antd/dist/dark-theme'
at Service.resolvePlugins (/Users/tigerhee/Desktop/kupo/explorer/node_modules/umi-build-dev/lib/Service.js:176:15)
at new Service (/Users/tigerhee/Desktop/kupo/explorer/node_modules/umi-build-dev/lib/Service.js:150:25)
at Object. (/Users/tigerhee/Desktop/kupo/explorer/node_modules/umi/lib/scripts/realDev.js:49:25)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
at startup (internal/bootstrap/node.js:285:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

在antd pro v5版本安装插件后报错

Error: Plugin resolved failed, Please check your plugins config, it must be array of string.

"umi": "^3.5.0",
"umi-plugin-antd-theme": "^2.1.3"