目前公司项目前端需要重构,从后端渲染(jsp)变成前后端分离(react),并且重构整个 ui,想了解一下有没有什么新的构建工具或者 css 库比较适合我们的需求.
大概有这几种需求: 1.客户自定义主题(字体,颜色,基础样式),但是可以是离线编译的(客户提交主题后我们后台帮他们编译+部署) 2.非 SPA,如果可以的话不同的模块使用各自的 css 3.我们设计师和前端都是半吊子,所以最好是不要从头写样式
项目非常老,用的是 less,整套流程都是手搓的脚本完成的
感谢
![]() | 1 paradox8599 320 天前 via Android 样式…我现在是只会用 tailwind/unocss 了 |
2 lee88688 320 天前 话说 less 不能满足需求吗,我感觉能满足目前你的需求啊 |
![]() | 3 murmur 320 天前 我们设计师是半吊子 这个很严重,css 其实没那么重要,尤其是 chrome ,100 个人有 200 个实现方法 设计师半吊子很严重 |
![]() | 4 murmur 320 天前 贴图可以解决 80%的问题,贴视频可以解决剩下 20%的问题,然而设计师不行难看没法解决啊 |
5 liaozzzzzz 320 天前 via iPhone ![]() 你们这难点不在于用什么构建工具,在于 ux 和前端怎么抽离这套主题。css 变量就符合你们的要求了吧,甚至都不需要构建什么只需要保存用户的配置前端初始化的时候覆盖一下默认样式就行。 |
![]() | 6 bgm004 320 天前 |
![]() | 7 k9982874 320 天前 装 webpack 插件,继续用 less 有什么问题吗? |
8 byj66 320 天前 参考一下我的开源项目 oneimg 文字转成图片工具,核心也是一个可以切换主题模板的系统。 开源地址: https://github.com/byodian/oneimg 预览地址: https://oneimgai.com/ 本项目使用 css-in-js 方案(tss-react 工具 https://www.tss-react.dev )在运行时动态生成样式主题。同时也可以结合参考 Matreial UI ( https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme )的主题思路。 ------------------------- 项目结构: 1. 基础模板 https://github.com/byodian/oneimg/tree/main/src/components/preview/styles 自定义的模板(模板以及主题变量) https://github.com/byodian/oneimg/tree/main/src/theme 生成模板样式、主题自定义变量的工具函数 https://github.com/byodian/oneimg/blob/main/src/lib/template.ts - 根据配置生成 CSS 变量:generateThemeVariables - 生成 CSS 样式:createStyle 3. 在项目中使用动态生成的样式 - CSS 变量作为全局样式使用 https://github.com/byodian/oneimg/blob/main/src/app/page.tsx <GlobalStyles styles={{ ':root': cssVariables }} /> - 使用 CSS 样式 https://github.com/byodian/oneimg/blob/main/src/components/preview/card.tsx -------------------- 如果你想支持 RSC ,可以考虑 zero runtime 解决方案,像 https://panda-css.com 和 https://vanilla-extract.style |
9 abc1310054026 320 天前 tailwindcss 可以吧,所谓离线编译替换成用户设置的 css 变量就行了。 |