pnpm workspace with React TS & TailwindCSS (2)

이제 공통 컴포넌트와 스타일을 어플리케이션에 적용해보자.

1. export 설정

component를 밖에서도 사용하기 위해 Button을 export해준다.

// packages > component > src > index.ts
import './global.css';
export { default as Button } from './Button';

그리고 index.html 등 필요없는 파일들을 지워준다.

2. 빌드 설정

vite로 react-ts 템플릿을 사용한지라,,, 그냥 pnpm build:comp하면 에러가 날 것이다.

Could not resolve entry module "index.html".
error during build:
RollupError: Could not resolve entry module "index.html".
at error
at ModuleLoader.loadEntryModule
at async Promise.all (index 0)

빌드 커스텀

entry point를 src/index.ts로 변경한다.

pnpm i -D --filter @packages/component @types/node

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
	build: {
		lib: {
			entry: resolve(__dirname, 'src/index.ts'),
			formats: ['es'],
		},
	},
	plugins: [react()],
});

그리고 typescript package를 생성해야 하기 때문에 plugin을 추가해준다.

pnpm i -D --filter @packages/component vite-plugin-dts

// vite.config.ts
// ...
import dts from 'vite-plugin-dts';

export default defineConfig({
	//...
	plugins: [react(), dts()],
});

빌드 결과

빌드 파일이 component.js가 아닌 index.js가 되도록 하자.

// vite.config.ts

export default defineConfig({
	build: {
		// ...
      	rollupOptions: {
			output: {
				format: 'es',
				entryFileNames: 'index.js',
				dir: 'dist/',
			},
		},
	},
});

빌드 결과

package.json 수정

// 추가
"main": "dist/index.js",
"types": "dist/index.d.ts",

3. app에서 component 호출

// projects/app/src/App.tsx
import { Button } from '@packages/component';

function App() {
	return (
		<>
			<h1>Vite + React</h1>
			<div className="card">
				<Button>버튼</Button>
			</div>
		</>
	);
}

export default App;

app 실행

component에 global.css로 설정한 스타일은 적용이 안되는 듯 하다ㅠ 이유를 찾아봐야 한다.

4. component의 global.css를 app에 적용하기

component의 global.css를 projects의 index.css에 공통 스타일에 적용하려고 한다.

먼저 app의 최상단 css 파일인 index.css를 다음과 같이 변경한다.

/* /app/src/index.css */
@import '@packages/component/src/global.css';

component의 global.css를 수정한다.

/* /component/src/global.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
	.card {
		background-color: theme('colors.white');
		border-radius: theme('borderRadius.lg');
		padding: theme('spacing.6');
		box-shadow: theme('boxShadow.xl');
	}
}

app의 App.tsx

import { Button } from '@packages/component';

function App() {
	return (
		<>
			<div className="card">
				<Button>버튼</Button>
			</div>
		</>
	);
}

export default App;

재빌드 후 실행시키면

잘 반영이 되었다!

전체 소스는 여기에