Svelte 기본 셋팅 (Rollup+Svelte+TypeScript+SCSS+PostCSS+Alias)

1. 롤업 프로젝트 설정

$npx degit sveltejs/template rollup-svelte

2. 타입스크립트

$cd rollup-svelte
$node scripts/setupTypeScript.js

3. svelte.config.js 파일 생성

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess')
const production = !process.env.ROLLUP_WATCH

module.exports = {
  preprocess: sveltePreprocess({sourceMap: !production}),
  compilerOptions: {
    // enable run-time checks when not in production
    dev: !production
  }
}

4. rollup.config.js 수정

		/* svelte({
			preprocess: sveltePreprocess({ sourceMap: !production }),
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}), */ // 주석
		svelte(require('./svelte.config')), // 추가

5. SCSS

$ npm i -D sass
$ npm i -D rollup-plugin-scss

rollup.config.js 수정

import scss from 'rollup-plugin-scss';

	plugins: [
    ...
		scss({
			output: 'public.build/assets.css'
		}),
    ...
    ]

public/index.html 추가

	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/bulid/assets.css'> <!-- 추가 -->
	<link rel='stylesheet' href='/build/bundle.css'>

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess')
const production = !process.env.ROLLUP_WATCH

module.exports = {
  preprocess: sveltePreprocess({
    sourceMap: !production,
    prependData: `@import './src/asset/scss/variables.scss'`}
  ),
  compilerOptions: {
    // enable run-time checks when not in production
    dev: !production
  }
}

6. PostCSS

$ npm i -D postcss autoprefixer

rollup.config.js 수정

import autoprefixer from 'autoprefixer';
import postcss from 'postcss';

plugins: [
		...
		scss({
			output: 'public.build/assets.css',
			processor: css => postcss([autoprefixer])
			.process(css)
			.then(result => result.css)
		}),

7. 별칭

$ npm i -D @rollup/plugin-alias

rollup.config.js 수정

	plugins: [
		...
		alias({
			entries: [
				{ find: '@', replacement: path.resolve(__dirname, 'src') }
			]
		}),

tsconfig.json 수정

{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {"@/*": ["src/*"]}
  }
}

* 프로젝트 퀵 스타트

$ npx degit beomy/template # Rollup+Svelte+TypeScript+SCSS+PostCSS+Alias