개발자
Nextjs with tailwind기반 ui라이브러리 질문
프론트엔드 취업전인 학생입니다. Rollup으로 라이브러리 번들 관련하여 질문입니다. 제작 현시점은 사용자가 컴포넌트를 import 하였을때 사용자가 tailwind.config.ts에 node_module경로의 제 라이브러리를 경로를 설정해야 스타일이 적용이 되는상황입니다. 개발자도구 element에는 텍스트상 적용이돼있는데 해당 방법말고는 못찾았습니다. 개발자분들의 좋은의견 부탁드립니다. 아래는 현재 rollup.config.js입니다.
1import babel from '@rollup/plugin-babel';
2import typescript from 'rollup-plugin-typescript2';
3import postcss from 'rollup-plugin-postcss';
4import autoprefixer from 'autoprefixer';
5import tailwindcss from 'tailwindcss';
6import replace from '@rollup/plugin-replace';
7import commonjs from '@rollup/plugin-commonjs';
8import { nodeResolve } from '@rollup/plugin-node-resolve';
9import json from '@rollup/plugin-json';
10import { terser } from 'rollup-plugin-terser';
11
12export default {
13 input: 'src/index.ts',
14 output: [
15 {
16 dir: 'dist/cjs',
17 format: 'cjs',
18 sourcemap: false,
19 },
20 {
21 dir: 'dist/esm',
22 format: 'esm',
23 sourcemap: false,
24 },
25 ],
26 plugins: [
27 nodeResolve(),
28 commonjs(),
29 json(),
30 typescript({
31 useTsconfigDeclarationDir: true,
32 }),
33 babel({
34 extensions: ['.js', '.jsx', '.ts', '.tsx'],
35 babelHelpers: 'runtime',
36 exclude: 'node_modules/**',
37 }),
38 postcss({
39 plugins: [tailwindcss(), autoprefixer()],
40 extract: 'tailwind.css',
41 }),
42 replace({
43 'use client': '',
44 preventAssignment: true,
45 }),
46 terser(),
47 ],
48 external: [
49 'react',
50 'react-dom',
51 'next/image',
52 'lucide-react',
53 'class-variance-authority',
54 'next-themes'
55 ],
56};
답변 1
컴포넌트 라이브러리를 구성하는 방법은 크게 두가지가 있습니다. 1. 컴포넌트에 직접 스타일을 입혀서 배포하기 -> 이 방법은 사용자측에서 컴포넌트를 Import 해서 사용하기만해도 모든 스타일이 입혀져있습니다. 2. 컴포넌트와 함께 CSS 파일도 배포하기 -> 이 방법은 사용자측에서 CSS파일도 함께 임포트해주어야합니다. 일반적으로 대부분의 컴포넌트 라이브러리는 사용자측이 라이브러리를 커스터마이징 할 수 있는 2번 방법을 주로 사용합니다. 테일윈드를 이용하여 컴포넌트 라이브러리를 빌드해서 릴리즈하고 싶으시다면 테일윈드 빌드 결과물도 사용자에게 제공하셔야합니다. 테일윈드는 클래스네임을 기반으로 그에 대응되는 CSS 클래스들을 생성하는 형태로 동작하기 때문입니다. 라이브러리를 배포하실 때 테일윈드도 빌드하여 내보내주시고 사용자측에서 내보낸 빌드결과물을 import 하도록 해주시면 되겠습니다
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 11월 08일
문제는 사용자가 컴포넌트를 가져올 때 `node_module` 경로에 있는 라이브러리를 설정하고 Tailwind CSS 스타일을 적용해야 하는 상황입니다. 이것은 사용자에게 번거로움을 줍니다. Rollup에서 제공하는 방법 중 하나로, 라이브러리 스타일을 번들에 포함시켜 문제를 해결해 볼 수 있습니다. Rollup의 plugin-postcss 플러그인은 CSS 파일을 분리하지 않고 JS 번들에 직접 포함시키는 옵션을 제공합니다. 이렇게 하면 사용자가 추가로 설정할 필요 없이 곧바로 스타일링이 적용될 것입니다. postcss 플러그인 설정에서 `extract: 'tailwind.css'` 부분이 문제입니다. 이 설정으로 인해 모든 css 파일들이 tailwind.css 파일로 추출되는데 이 경우 항상 node_modules 에서 불러와야 합니다. `extract:false` 로 바꾸면 js 번들 안에 css가 내장되어 따로 호출할 필요가 없습니다. ```javascript postcss({ plugins: [tailwindcss(), autoprefixer()], extract: false, }), ``` 만약 위 방법으로도 문제가 해결되지 않는다면 계속해서 다른 방법을 찾아보셔야 할 것 같습니다. 또한, 배포시의 번들 크기를 고려해야 할 수 있습니다. 스타일이 포함된 번들은 용량이 커질 수 있으므로, 필요에 따라 사용자에게 별도의 스타일시트를 제공하라고 안내하는 것을 고려해 볼 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!