LoginSignup
5

More than 3 years have passed since last update.

Sapper で SCSS を使う方法( rollup 利用時)

Last updated at Posted at 2020-05-12

「えらく rollup 推しだなー」なんて思っていましたがなるほど、 Svelte の開発者が rollup の開発者であることを最近知りました。
以前、 SapperでSCSS(や他のCSSプリプロセッサ)を使う方法 というのを書きましたが、 rollup 利用時の方法も残しておきたいと思います。

インストール

インストールするパッケージは webpack のときと同様に svelte-preprocessnode-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> に設定しています。

すると……
sapper-scss.png
おじさんじゃなくなりましたね

まとめ

ググって出てくるのは大抵の場合 webpack のものばかりで個人的には苦労しました 💦

開発者が rollup 推しのようなので、今後は rollup を使って SapperSvelte )を触っていこうと思います!
日本語の情報も少ないので、どなたかの役に立てば幸いです :yum:

参考

:link: Svelte / Sapper with Sass!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5