scss support + cli settings

[luketn]

Hi!
Absolutely love the app. Totally awesome.
One thing would be really cool - Sass (.scss file) support.
I'm a maintainer on an angular -> materlialize component and it would be handy to create some demo projects here, but we'd need .scss support and the ability to tweak the CLI settings a little to use the scss extension and load a couple of scripts.
Hope you can help!
Cheers,
Luke

[EricSimons]

@luketn thanks for the kind words! And absolutely — scss support shouldn't be hard for us to implement :) What CLI settings are you looking to tweak?

[JoniWeiss]

Create-react-app includes support for SCCS and LESS support. Why not, in the Settings panel (or a new Options panel), add options for SASS, LESS, and other options provided by the inclusion of the .env file in the create-react-app project directory? It would need to also be included on export.

[EricSimons]

@JoniWeiss Great idea! We can def do this 👍

@luketn Another q for ya — when you said "...and load a couple of scripts", what kind of scripts would you be looking to load?

[cwtuan]

Does it has SASS support currently?

[EricSimons]

Hey all! We just shipped SASS and LESS support, and we also support the angular-cli.json config too :) You can check it out in action in the Angular starter template or my Angular Material starter template — would love hear your thoughts :)

[Sampath-Lokuge]

@EricSimons Aweseom. Thank you 👍 Hope stackblitz rocks the Ionic world too. See the example here.

https://stackoverflow.com/questions/46252546/add-scss-file-to-the-stackblitz

[sinedied]

@EricSimons any new for SASS support with React?

[seawatts]

@sinedied did you ever get this working?

[sinedied]

@seawatts Yes just rename styles.css to styles.scss and update the import

[seveves]

@luketn may we close this issue? I think sass support is working now properly

[guillaumemach]

Hello,

We are testing the app ad it looks awesome.
Based on @EricSimons replies, how can we add less files ?

Thanks a lot !

[seveves]

What do you mean with "how"? You can just add a file with the extension .less. Doesn't it work for you? Any related stackblitz project you can link to?

[guillaumemach]

Hello @seveves , sorry for my not well documented question. When we add a file with the extension .less, we get the following error message :

We were just trying the default demo. I am asking the question before digging further because all our css libs are using less

[seveves]

@gmacherey what default template are you using? angular, react or another one? I will try to reproduce your issue and if it really does not work then we really should open a new issue 😬

[guillaumemach]

@seveves here are the exact steps I'm doing:

1. Go to the main website : https://stackblitz.com/
2. Click on Javascript Blank Project (https://stackblitz.com/fork/js)
3. Try to add a less file : for example custom-style.less
4. Hit enter
5. I get the error described in my previous message

I hope I haven't misunderstood where this functionnality is available.

Thanks

[EricSimons]

@gmacherey can you try it now? I just enabled LESS for both the JS & TS vanilla starter projects

[guillaumemach]

@EricSimons , thanks a lot.

The file is accepted now, and I can import it from the index.js file. However the styles from the less file does not seem to be applied.

Here is a very basic example: https://stackblitz.com/edit/js-mvvjqb?file=index.js
Should I set somewhere the preprocessor ?

Thanks again

[EricSimons]

SHOOT I screwed that up lol. Can you try forking a new project on the homepage now? It should work :)

[guillaumemach]

@EricSimons no problem, this is working perfectly now. Thanks a lot !