Vite로 구축된 React 구성 요소 라이브러리에서 스타일을 분할하거나 주입합니다.

Question

현재 Vite를 사용하기 위해 구성 요소 라이브러리의 빌드 단계를 다시 작성하고 있습니다. 스타일에 문제가 있습니다. 스타일은 분할되지 않고 하나의 큰 style.css 파일로 묶입니다. 이로 인해 두 가지 질문이 생깁니다.

• 다른 프로젝트에 패키지를 설치하면 자동으로 포함되지 않습니다. 구성 요소를 가져오면 style.css가 마술처럼 가져오지 않습니다.
• 실제로 사용하지 않는 구성요소에서 스타일을 가져오고 있습니다.

이전 설정에서는 스타일 주입이 있었는데, 이는 CSS가 구성 요소에 주입되어 분할되었음을 의미합니다. Vite로 비슷한 것을 얻을 수 있나요?

현재 빌드 설정은 다음과 같습니다.

으아아아

최종 dist 文件夹如下所示（我排除了所有 .d.ts 파일):

보시다시피 큰 style.css이 있는데 제가 찾는 것이 아닙니다.

이 문제를 해결할 방법이 있나요?

Answer 1

아직 문제를 해결하지 못했다면 제가 찾을 수 있는 가장 쉬운 방법은 플러그인 vite-plugin-css-injected-by-js을 Vite에 추가하여 생성된 CSS를 JS 파일로 내부화하는 것입니다.

https://www.npmjs.com/package /vite-plugin-css-injected-by-js

그런 다음 VITE 프로필을 다음으로 변경할 수 있습니다:

으아악