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

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

使用umi-plugin-antd-theme后，我组件中的那些样式就无法引用了，根本没加载那些less文件

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

🧐 问题描述

在打包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

🚑 其他信息

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

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!

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

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

谢谢

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

[
  "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.

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 |

本地环境切换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才能请求到
所以请问, 这个是不是缺少对应的配置方法?

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

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

set the by default English language

[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版本方式

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

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;'
]

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"

I am using and.design Pro V4.
I have successfully installed the umi-plugin-antd-theme library. and everything works fine. but how can I do so that the settings are not shown in the navigation bar?

http://localhost:8000/welcome?fixedHeader=true&fixSiderbar=true&colorWeak=false&title=SysGiD&pwa=false&navTheme=realDark&primaryColor=purple

组件环境

• "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} 后不存在上面的问题，见下图：

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

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

重现步骤：

1. 声明图片资源变量 并:global 方式使用变量
2. chrome network 设为disabled
3. resize 窗口
4. 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);
  }
}

这个就一个usage, 看不懂怎么用的丫
能不能在readme里边写个简单的使用步骤啊

如何配置主题CSS根目录

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

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

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

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

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