Tencent / Tencent/tdesign-react

[CSS] CSS 样式在发布后丢失

Open
#3,385 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

compatibility
Dominant language
TypeScript
Stars
965
Forks
373
Avg merge
3d 6h
Merged PRs (30d)
17

Description

tdesign-react 版本

v1.11.0

重现链接

No response

重现步骤

main.tsx 添加 import "tdesign-react/es/style/index.css";

在 Dev 模式下样式显示均正常,使用 vite build 构建后发现大部分控件样式丢失。

如果使用 import "tdesign-react/dist/tdesign.css"; 能够正常发布且样式正常,但打包的 CSS 体积非常大。

vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import { patchCssModules } from "vite-css-modules";

// https://vite.dev/config/
export default defineConfig({
    plugins: [patchCssModules(), react(), tailwindcss()]
});

期望结果

根据官方文档 import "tdesign-react/es/style/index.css"; 应该能够正常使用

实际结果

No response

框架版本

React 18.2.0

浏览器版本

133.0.3065.82

系统版本

Windows 11 24H2

Node版本

v22.14.0

补充说明

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the import in main.tsx and the build configuration in vite.config.ts, then reproduce the difference between development mode and vite build using the reported tdesign-react v1.11.0 setup. Compare the generated CSS for the es/style/index.css import with dist/tdesign.css; done means the documented import preserves the component styles after a production build without requiring the oversized bundle.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, typescript, vite
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.