V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
calabashfox
V2EX  ›  程序员

想了解一下合适我们的 css 构建工具

  •  
  •   calabashfox · 22 小时 6 分钟前 · 967 次点击

    目前公司项目前端需要重构,从后端渲染(jsp)变成前后端分离(react),并且重构整个 ui,想了解一下有没有什么新的构建工具或者 css 库比较适合我们的需求.

    大概有这几种需求: 1.客户自定义主题(字体,颜色,基础样式),但是可以是离线编译的(客户提交主题后我们后台帮他们编译+部署) 2.非 SPA,如果可以的话不同的模块使用各自的 css 3.我们设计师和前端都是半吊子,所以最好是不要从头写样式

    项目非常老,用的是 less,整套流程都是手搓的脚本完成的😅

    感谢

    9 条回复    2024-12-05 10:38:06 +08:00
    paradox8599
        1
    paradox8599  
       20 小时 42 分钟前 via Android
    样式…我现在是只会用 tailwind/unocss 了
    lee88688
        2
    lee88688  
       18 小时 5 分钟前
    话说 less 不能满足需求吗,我感觉能满足目前你的需求啊
    murmur
        3
    murmur  
       17 小时 43 分钟前
    我们设计师是半吊子

    这个很严重,css 其实没那么重要,尤其是 chrome ,100 个人有 200 个实现方法

    设计师半吊子很严重
    murmur
        4
    murmur  
       17 小时 42 分钟前
    贴图可以解决 80%的问题,贴视频可以解决剩下 20%的问题,然而设计师不行难看没法解决啊
    liaozzzzzz
        5
    liaozzzzzz  
       17 小时 20 分钟前 via iPhone   ❤️ 1
    你们这难点不在于用什么构建工具,在于 ux 和前端怎么抽离这套主题。css 变量就符合你们的要求了吧,甚至都不需要构建什么只需要保存用户的配置前端初始化的时候覆盖一下默认样式就行。
    Track13
        6
    Track13  
       17 小时 9 分钟前
    k9982874
        7
    k9982874  
       17 小时 9 分钟前
    装 webpack 插件,继续用 less 有什么问题吗?
    byj66
        8
    byj66  
       15 小时 56 分钟前
    参考一下我的开源项目 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
    abc1310054026
        9
    abc1310054026  
       15 小时 31 分钟前
    tailwindcss 可以吧,所谓离线编译替换成用户设置的 css 变量就行了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1249 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 18:09 · PVG 02:09 · LAX 10:09 · JFK 13:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.