Sapper에서 SCSS를 사용하는 방법 (rolllup 사용시)

"어쩐지 rollup 추측구나-"라고 생각하고 있었을 정도로, Svelte의 개발자가 rollup의 개발자인 것을 최근 알았습니다.
이전에 Sapper에서 SCSS(및 기타 CSS 전처리기)를 사용하는 방법이라는 것을 썼습니다만, rollup 이용시의 방법도 남겨두고 싶습니다.

설치

설치할 패키지는 webpack 때와 마찬가지로 svelte-preprocess 및 node-sass.

$ npm i -D svelte-preprocess autoprefixer node-sass

(벤더 접두사 해소 Autoprefixer도 편리하므로 함께 설치하고 있습니다)

설정

webpack의 경우 webpack.config.js이었지만 rollup의 경우 rollup.config.js를 편집합니다.

rollup.config.js

// Using sass
+ import sveltePreprocess from 'svelte-preprocess';
+ const preprocess = sveltePreprocess({
+   scss: {
+     includePaths: ['src'],
+   },
+   postcss: {
+     plugins: [require('autoprefixer')],
+   },
+ });

// ...

export default {
  client: {
    plugins: [
      svelte({
        // ...
+         preprocess, // 🚀 Add
      }),
  },
  server: {
    plugins: [
      svelte({
       // ...
+         preprocess, // 🚀 Add
      }),
    ],
  },
};

사용법

명확하게 설치한 상태에서 Sapper(v0.27.12) 응용 프로그램의 index.svelte를 편집해 봅니다.

index.svelte

<style lang="scss">
    $gradient: linear-gradient(-90deg, #2af598, #009efd);

    h1 {
        background-image: $gradient;
    }
</style>

그라데이션 배경에 대한 $gradient 변수를 준비하고 <h1>로 설정합니다.

그러자…

(아저씨가 아닙니다.)

요약

구구는 나오는 것은 대부분의 경우 webpack의 것만으로 개인적으로는 고생했습니다 💦

개발자가 rollup 추측과 같으므로 앞으로는 rollup 을 사용하여 Sapper ( Svelte )를 만져 가려고합니다!
일본어 정보도 적기 때문에 누군가의 도움이 되었으면 좋겠습니다

참고

Svelte / Sapper with Sass!