Help us understand the problem. What is going on with this article?

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

「えらく rollyp 推しだなー」なんて思っていましたがなるほど、 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!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした