Codesandbox-client: SCSS support

[manuschiller]

Hi!
Is it possible to include .scss files in the codesandbox-client and import the styles to our jsx files?

[CompuIves]

Hey!

Yep, it's not released yet, but I'll work on this in the coming month. This comes with support for other frameworks.

[andrerpena]

Is it released?

[CompuIves]

It's released for preact and vue. Not yet for React, because we need to find a way to export and detect an ejected CRA for it to work.

[andrerpena]

@CompuIves. Thank you for your response.

I'm releasing a new version of https://github.com/andrerpena/react-mde and I'd like the demos to be moved to CodeSandBox. I've never used Preact. Would components implemented for React work on Preact? I suppose not.

[chakrihacker]

@andrerpena with preact-compat react components work fine in preact, and fortunately codesandbox comes with preact-compat so it works seamlessly. check preact-compat here. your react-mde is nice by the way :smile:

[bram-l]

It seems like sass support in the preact-cli template is not working as expected. A small change in the default style shows that the scss is not transpiled into css: https://codesandbox.io/s/m3m6vl05rj

Changing the same stylesheet to sass syntax actually throws an error: https://codesandbox.io/s/8z8q40ok1l

[crazyyi]

When will this be implemented? Anything I can do to contribute to this project?

[aprather51]

Maybe Codesandbox.io could try use ParcelJS Template too. Connecting SCSS is lot easier.

[CompuIves]

We can close this one now :smile:. We have parcel support!

[RavenHursT]

@CompuIves why was this closed?

import './styles.css'
works in my react apps that I roll on CodeSandbox.io

But...
import './styles.scss' still doesn't do anything. Not even throwing an error...

[CompuIves]

The React template in CodeSandbox is based on create-react-app, which doesn't support SCSS, but will probably have it in v2 (https://github.com/facebook/create-react-app/issues/3815). If you'd download the sandbox and run it locally with CRA it would fail to load.

You can, however, start a sandbox based on parcel and use React with that, here's an example sandbox: https://codesandbox.io/s/rjj38yzm14.

[RavenHursT]

Awesome. Thanks for the explaination!

[vladinator1000]

Is there a way to not have to reload the page to see changes?

[johncokos]

Given that create-react-app has a workaround for this ... is there a way to get this working via the suggested workaround until version 2 is released?

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

I did attempt this locally and it of course works, but not in a sandbox. Are you not running the npm start script to fire the sandboxes?

[jayarjo]

So still no go ha?

[danieldanielecki]

Anyone knows if/when it'll be doable inside CodeSandbox for static templates?

[SaraVieira]

Hey!

Our static template doesn't do any bundling so it's sadly not possible unless you use something like this: https://github.com/medialize/sass.js/blob/master/docs/getting-started.md

Sorry :/