권돌선생님의 블로그

Svelte Kit 사용중 외부 라이브러리 css 모듈을 사용할 일이 있는데.. 간혹

import 시 css 파일이 통합 적용 안되어 있는 모듈이 있다.

​

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

그렇다고 매번 위와 같은 방식을 적용하면 매번 css 파일을 웹으로 접근해서 가져와야 하므로 매우 비효율적이다.

​

자 Svelte Kit 프로젝트 내의 vite.config.ts 로 접근해보자.

import { sveltekit } from '@sveltejs/kit/vite';
import  { defineConfig } from 'vite';

export default defineConfig({
	build: {
		rollupOptions: {
		  // 외부 모듈을 번들링합니다.
		  external: ['tabulator-tables-css'],
	
		  // 번들에 포함할 모듈의 경로를 설정합니다.
		  output: {
			globals: {
			  'tabulator-tables-css': 'Tabulator', 
// 모듈 이름과 전역 변수 이름을 설정합니다.
			},
		  },
		},
	  },
	  resolve: {
		alias: {
		  // 사용할 모듈의 별칭을 설정합니다.
		  'tabulator-tables-css': 'tabulator-tables/dist/css/tabulator_modern.min.css',
		},
	  },

	plugins: [sveltekit()],
  });

​

위 코드의 주석을 살펴보면, 먼저 resolve 객체를 가면

  'tabulator-tables-css': 'tabulator-tables/dist/css/tabulator_modern.min.css',

왼쪽이 프로젝트 내에서 어떻게 사용할지 별명을 짓는것이며, 우측은 node_modules 내의 소스코드 경로이다.

​

위의 css 파일 경로를 작성하고, 실제 사용할 .svelte 및 js, ts파일에서 로드하는 방법은

import 'tabulator-tables-css'; // CSS 파일이 import됩니다.

이런식으로 호출해서 사용한다.

그외 scss 나 static 폴더내에 css 를 정의해서 app.html에 정의하는 방법이 있으나

node_modules 내의 css 파일을 import 하는 방법은 저런식으로 사용한다.