Sapper - Rollup환경에서 Sass 세팅

Sapper - Rollup환경에서 Sass 세팅

1. sass와 관련된 모듈 설치

npm i -D svelte-preprocess autoprefixer node-sass 혹은
yarn add -D svelte-preprocess autoprefixer node-sass

2. rollup.config.js 내에 설치한 모듈 sveltePreprocess를 import 및 setup

// Import sveltePreprocess
import sveltePreprocess from 'svelte-preprocess';

// Setup the preprocessing function
const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['src'],
  },
  postcss: {
    plugins: [require('autoprefixer')],
  },
});

3. rollup.config.js client 와 server blocks에 추가

export default {
  client: {
    plugins: [
      svelte({
        // ...
        preprocess, // <-- ADD THIS LINE
      }),
  },
  server: {
    plugins: [
      svelte({
       // ...
        preprocess, // <-- HERE TOO
      }),
    ],
  },
};