Sapper で SCSS を使う方法（ rollup 利用時）

3936 ワード
rollup.js Sapper scss Svelte Sass Sass テキストリンク

「えらく 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!