SapperでSCSS（や他のCSSプリプロセッサ）を使う方法

最近マイブームの Sapper （ Svelte ）ですが、 Nuxt の時のように SCSS が使いたくて調べたわけです。
（Sapperのインストールは こちら を）

標準ではSCSSは使えない

SCSSをはじめ、Less、StylusなどのCSSプリプロセッサはSapper単体ではサポートしていないようです。
（ :global() を駆使して......という方法ができなくはないみたい）

ちなみに、SapperのIssuesに似たようなものがあがっていました。

Global SASS/SCSS/Less/Stylus support #474

NuxtアプリケーションからSapperにコンバートするのでBulma使えないとこまるーみたいな感じです。

このIssuesのなかに、

For SCSS support you might want to have a look at https://github.com/kaisermann/svelte-preprocess and https://github.com/ls-age/svelte-preprocess-sass.

SCSSサポートしたいならライブラリを使ってよー的なレスがありました。

svelte-preprocess を使ってみる

Issuesでは2種類のライブラリが紹介されていましたが、より汎用的な svelte-preprocess の方を使ってみることにしました。

svelte-preprocess is 何？

A Svelte preprocessor wrapper with support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript and Pug.

svelte-preprocess

Svelteではサポートしていない、様々なプロセッサーをサポートしてくれるライブラリです。

サポート対象は、

• PostCSS
• SCSS
• Less
• Stylus
• CoffeeScript
• TypeScript
• Pug

と、かなり豊富。

インストール方法

$ npm install --save-dev svelte-preprocess

SCSSを使う場合、 node-sass のインストールも必要です。

$ npm install --save-dev node-sass

Sapperでの使い方

ライブラリのUsageに Sapperの場合の使い方 が書いてありますが、Sapperが svelte-loader を利用しているため、 svelte-loaderの場合の使い方 で実装しています。

webpack.config.js の編集

For client:

webpack.config.js

client: {
  entry: config.client.entry(),
  output: config.client.output(),
  resolve: { extensions, mainFields },
  module: {
  rules: [
    {
      test: /\.(svelte|html)$/,
      use: {
        loader: 'svelte-loader',
        options: {
+         preprocess: require('svelte-preprocess')({ scss: true }),
          dev,
          hydratable: true,
          hotReload: false // pending https://github.com/sveltejs/svelte/issues/2377
        }
      }
    }
  ]
},
// any...

For server:

webpack.config.js

server: {
    entry: config.server.entry(),
    output: config.server.output(),
    target: 'node',
    resolve: { extensions, mainFields },
    externals: Object.keys(pkg.dependencies).concat('encoding'),
    module: {
      rules: [
        {
          test: /\.(svelte|html)$/,
          use: {
            loader: 'svelte-loader',
            options: {
+             preprocess: require('svelte-preprocess')({ scss: true }),
              css: false,
              generate: 'ssr',
              dev
            }
          }
        }
      ]
    },
    // any...

SCSSの利用

わかりやすいようにインストールした状態のSapper（v0.27.4）アプリケーションの index.svelte を編集してみます。

index.svelte

<style lang="scss">
	$gradient: linear-gradient(-90deg, #FF00A1, #F6FF00);

	figure {
		margin: 0 0 1em 0;
		background-image: $gradient;
	}
</style>

グラデーション背景用の $gradient 変数を用意して、 <figure> に設定しています。

すると、

（ このおじさん誰なんでしょうね？ ）

まとめ

svelte-loader のおかげで簡単にSCSSを使うことができました！

（ここまで便利だと標準で用意してほしいレベルですｗ）

Sapperのバージョンが上がると実装方法が変わってしまうかもしれませんが、なるべく追いかけていこうと思います

おまけ

ポートフォリオはSapperでいくことにしました！