Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@azukisiromochi

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

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

4
Help us understand the problem. What is going on with this article?
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
4
Help us understand the problem. What is going on with this article?