How to add Sass Support

[vladejs]

I want to add sass support to the single component style tag.

[EmilTholin]

Hi @vladejs! Have you stumbled upon this repository? It might give some inspiration.

[vladejs]

I saw it uses rollup. Sapper uses webpack. I don't quite understand how to achieve it

[Rich-Harris]

Take the preprocess.style block (https://github.com/Rich-Harris/svelte-preprocessor-demo/blob/master/rollup.config.js#L31-L51) and add it to the svelte-loader section of the webpack config (i.e. options.style. Unfortunately I don't have a demo handy right now.

Be aware of this issue! At some point that options.style will become options.preprocess.style.

[vladejs]

Thanks. I made it work. I extracted the function to a preprocess.js file and used it inside webpage configs.

That way I dont clutter the config with custom functions and can have the preprocess logic in its own file.

btw I'm enjoying using svelte. Hope it evolves in popularity as well as react did.

[vladejs]

Do you know how to use svelte with meteor? I know there is a package for it but don't know how to do routing.

I'm also interested in using sapper with meteor as backend only. It could be the perfect stack for me.

Thanks

[nikolaswise]

@vladejs do you have a code sample of this working you can share?

[LorbusChris]

I'm also interested in using sapper with meteor as backend only. It could be the perfect stack for me.

@vladejs +1 to that. Please let us know when you have an example =)

[Rich-Harris]

I'll close this as there's no action required; SASS support is achievable with preprocess. I'm not sure what Meteor integration would mean, exactly, but at any rate that's something that should be discussed in a separate issue

[s0kil]

@vladejs @Rich-Harris Please provide an example of integrating sass with sapper and webpack.

[liko28s]

hey @DanielSokil take a look to webpack/client.config.js and webpack/server.config.js is based on @Rich-Harris proposal. currently i used bulmacss (because modularity), i use sass in routes/_styles folder, and compile global mixins and variables with gulp (to evade scoped css and unused styles removal) Good Luck!

[artburkart]

Hi, I'm sorry to resurface an old ticket, but now that a year has passed, how do you get this to work with the sapper-template?

I've tried the following:

import sass from 'node-sass';
...
...
...

svelte({
  dev,
  hydratable: true,
  emitCss: true,
  css: css => {
    css.write('public/bundle.css');
  },
  preprocess: {
    style: ({ content, attributes }) => {
      if (attributes.type !== 'text/scss') return;

      return new Promise((fulfill, reject) => {
        sass.render({
          data: content,
          includePaths: ['./node_modules', 'src'],
          sourceMap: true,
          outFile: 'x'
        }, (err, result) => {
          if (err) return reject(err);
          fulfill({
            code: result.css.toString(),
            map: result.map.toString(),
          });
        });
      });
    }
  }
}),

When I run npm run dev, I get the following:

✔ server (658ms)
✗ client
mappings.charCodeAt is not a function

I'm not sure how to debug this really. I'd step through the rollup code with a debugger, if I knew how. I tried searching for occurrences of the errant code, and I found these. There's only one occurrence of mappings.charCodeAt in each, and the one in the rollup.js file seems to be the code that's being executed, but when I add console.log to it, I don't see any indicator of an issue.

$ ag -S -u mappings.charCodeAt -o
node_modules/magic-string/dist/magic-string.umd.js.map
1:mappings.charCodeAt

node_modules/rollup/dist/rollup.js
596:mappings.charCodeAt

node_modules/rollup/dist/rollup.es.js
588:mappings.charCodeAt

node_modules/sourcemap-codec/dist/sourcemap-codec.es.js
16:mappings.charCodeAt

node_modules/sourcemap-codec/dist/sourcemap-codec.umd.js
22:mappings.charCodeAt

What might I be doing wrong? Thanks!

[s0kil]

@artburkart

Just use svelte-preprocess-sass

In rollup.config.js

import { sass } from "svelte-preprocess-sass";

// Add preprocess to svelte plugin in `client` and `server`

// Client:
svelte({
        dev,
        hydratable: true,
        emitCss: true,
        preprocess: {
          style: sass()
        }
}),

// Server
svelte({
        generate: "ssr",
        dev,
        preprocess: {
          style: sass()
        }
}),

In your components, use it as:

<style type="text/sass">
  $font-stack: Helvetica, sans-serif;
  $primary-color: red;

  p {
    font: $font-stack;
    color: $primary-color;
  }
</style>

[artburkart]

@s0kil - Thanks. I'd tried using that to begin with, but I think I was doing a number of things slightly incorrect, so I wasn't seeing results. Your example painted it clear as day for me, and I was able to import an scss module.

[imsamtar]

@artburkart

Just use svelte-preprocess-sass

In rollup.config.js

import { sass } from "svelte-preprocess-sass";

// Add preprocess to svelte plugin in `client` and `server`

// Client:
svelte({
        dev,
        hydratable: true,
        emitCss: true,
        preprocess: {
          style: sass()
        }
}),

// Server
svelte({
        generate: "ssr",
        dev,
        preprocess: {
          style: sass()
        }
}),

In your components, use it as:

<style type="text/sass">
  $font-stack: Helvetica, sans-serif;
  $primary-color: red;

  p {
    font: $font-stack;
    color: $primary-color;
  }
</style>

This works but how would someone include bulma.sass globaly...

[s0kil]

@imsamtar There is not yet a solid solution to make such thing happen. But you could import it in every component.

[leafOfTree]

A Sass example for both webpack and rollup

wepback.config.js

  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
            hotReload: true,
            preprocess: [
              {
                style: sassToCSS
              }
            ],
          },
        },
      },

rollup.config.js

  plugins: [
    svelte({
      preprocess: [
        {
          style: sassToCSS,
        },
      ],

where sassToCSS is your function to convert sass to css.

[YoungElPaso]

@imsamtar There is not yet a solid solution to make such thing happen. But you could import it in every component.

So, if I understand correctly, the current way to say import global sass variables is to import that file in each component? I'm fine with that, just looking for clarification.

[badunius]

@artburkart In rollup.config.js

At what point did the author ask for a rollup solution?

[artburkart]

@badunius — can you clarify what you mean?

[badunius]

@artburkart

I saw it uses rollup. Sapper uses webpack. I don't quite understand how to achieve it — vladejs

It's just my second day of looking for a way to integrate sass with sapper/svelte, and I always stumble upon rollup solutions, despite the fact that sapper comes with webpack. To quote Red Dwarf, "There are problems in that can't be solved by rollup".

And even this one (https://github.com/sveltejs/sapper/issues/123#issuecomment-495819044) produces a compilation error (unexpected token)

[pckhoi]

For those who want to integrate sass with sapper/svelte and webpack, have you checked out svelte-preprocess? It's working for me.

[PierBover]

I ended up using svelte-preprocess following this tutorial:

https://medium.com/@sean_27490/svelte-sapper-with-sass-271fff662da9

I created this minimal template:

https://github.com/PierBover/svelte-sapper-starter-kit-minimal-rollup

[lucianoratamero]

For those wanting a fork of the base sapper-template with SASS enabled, I've created this repo here: https://github.com/lucianoratamero/sapper-sass-template

You may create your project based on it by running npx degit lucianoratamero/sapper-sass-template my-app.

Since I created it for personal use, I added a few opinionated configuration files for editorconfig, eslint, nvm and prettier, though.