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

最近マイブームの `Sapper` （ `Svelte`  ）ですが、 `Nuxt` の時のように `SCSS` が使いたくて調べたわけです。
（Sapperのインストールは [こちら](<https://qiita.com/azukisiromochi/items/6482318db15d7750c8bc>) を）



## 標準ではSCSSは使えない



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



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

:octocat: [Global SASS/SCSS/Less/Stylus support #474](<https://github.com/sveltejs/sapper/issues/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](<https://github.com/kaisermann/svelte-preprocess>) を使ってみる



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



### svelte-preprocess is 何？

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

:octocat: [svelte-preprocess](<https://github.com/kaisermann/svelte-preprocess>)



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

サポート対象は、

- PostCSS
- SCSS
- Less
- Stylus
- CoffeeScript
- TypeScript 
- Pug

と、かなり豊富。

### インストール方法

```shell
$ npm install --save-dev svelte-preprocess
```

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

```shell
$ npm install --save-dev node-sass
```

### Sapperでの使い方

ライブラリのUsageに [Sapperの場合の使い方](https://github.com/kaisermann/svelte-preprocess#with-sapper) が書いてありますが、Sapperが `svelte-loader` を利用しているため、 [svelte-loaderの場合の使い方](<https://github.com/kaisermann/svelte-preprocess#with-svelte-loader>) で実装しています。



#### `webpack.config.js` の編集

**For client:**

```diff: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:**

```diff: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` を編集してみます。



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

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



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



すると、
![Sapper×SCSS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/dfada075-81a8-200f-c699-6ce667209597.png)
（ ~~このおじさん誰なんでしょうね？~~ ）



## まとめ



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

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

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



## おまけ



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