「えらく 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 ）を触っていこうと思います！
日本語の情報も少ないので、どなたかの役に立てば幸いです 
