CSS preprocessors?

[punmechanic]

Just wondering how Svelte ties in to existing CSS preprocessors? I'm not seeing any documentation around this, and I'm not expecting it to just magically work if I add less or scss content to my style tags.

This would mainly be useful when using existing frameworks like Bootstrap.

[Rich-Harris]

Right now, this isn't supported. It's come up previously in the context of compile-to-JS languages (#98), and tangentially in the context of creating components from multiple files (i.e. a linked stylesheet/script) in #65. But until then, it would be a case of preprocessing the CSS and creating a single-file component to hand off to Svelte.

[nsaunders]

FWIW, we made our own svelte-cli analog that runs the stylesheet through the less compiler and then hands the result off to the svelte compiler. I can't open-source it because my employer doesn't understand the benefits, but it wasn't hard. Currently I am trying to modify a fork of the svelte-loader to use our compiler that wraps less and svelte.

[dschulten]

@therealnicksaunders What did you use as extension point in svelte-cli? It would make sense to introduce an official compiler-plugin api to svelte-cli which allows to process compilation steps. See also #194

[nsaunders]

@dschulten we didn't need most of the options in svelte-cli so I wrote our version from scratch. It consumes our xxxxx-svelte library that has a compile method that takes care of less precompilation and then passes the result to svelte's compile method. The API pretty much matches svelte, with the main difference being that it is asynchronous due to the less API being asynchronous.

I guess my point was that it was not terribly difficult as an interim solution, but I agree that this is going to be something a lot of people want out-of-the-box.

Maybe a good first step would be to make svelte's compile method asynchronous. That would have allowed me to fork svelte-cli, svelte-loader, et cetera, and leave them mostly unmodified (just swapping out the svelte dependency in favor of our own version).

[colshacol]

I don't think it would take more than an hour or two to create a simple npm package that would pre-parse the Svelte HTML files for <style> enclosures, pass that through the compiler of your choice, then pass the entire file on to Svelte. It would be hacky, but it'd work for now.

I may work on this this evening.

[praneybehl]

Has this been implemented yet?

[Rich-Harris]

Not yet, no

[kazzkiq]

The only thing keeping Svelte from being approved for a big project right now is the lack of official support for SASS/SCSS by the framework (which is a must for all company projects where I work).

Has anyone managed to "hack" SASS support into Svelte? If yes, do you guys have any tips or perhaps a code sample to share?

[PaulBGD]

The main issue is that Svelte can't just add support for SASS, it has to add full support for any CSS preprocessors. Svelte also modifies the generated CSS, so the build process has to actually be handled by Svelte as well.

[piyushchauhan2011]

I'm currently just using the scss through webpack build process. Having to use the hash based css names through sass, ahh - someone might need to have a go at that or CSS modules thing. I think, due to compilation everything is very limited to change, like supporting Sass and TypeScript. I would love to learn more about the patterns that could be invented for it to become approved for bigger projects.