Less/Sass

[franleplant]

Hi guys! thank you for this project.

I hate being Captain Obvious here but what are the plans for Less Sass support? It seems like a pretty extreme action to eject my app just to get less or sass in it when they are pretty standard (less and sass would make this tool easier to sell to our bosses).

I understand that choosing either is against the core ideas but parameterizing the choice also is against the core ideas so we are running out of options.

When I prototyped something like create react app in my own, one of the things I thought of was to provide hooks to the webpack config to extend it with Less for example, is that something you would be interested in adding?

I might create some prototypes if we agree upon something since my employeer is pro oss contribution.

Thanks a lot
Fran

[vjeux]

This issue has a lot of context around this question: #78

Thanks for offering your help but right now this is not something we want to support in this project. If you have a concrete example of why Less/Sass is useful in the context of a React app, please comment on that other issue, we'd love to know.

[eliperelman]

Modifying or extending the Webpack configuration without ejecting, for example to add Sass/Less loaders, is also not supported with that feature not being anticipated. I encourage you to check out the alternatives if you find the Sass/Less support is required for your project.

[gaearon]

Also, while we don't intend to ship either tool in the default setup, please feel free to use them just like people have been using them for years: with a CLI.

https://twitter.com/soska/status/760964598451372032

[franleplant]

Thanks @vjeux for the pointers and @gaearon that's actually a very good alternative.

Being all that said I think that your little project might finally make CSS in Javascript standard.
I love the library Radium and it's trivial to add it to a project running on create-react-app and arguably you could have the same benefits (and even more), for example:

• Shared variables
• Scoped CSS (this is sort of modules)
• Shared common chunks of css codes
• Mixins et al (Plain JS functions 😮 )

BONUS: Write styles with exact CSS/LESS/SASS Syntax with this package
So I think I might be working with that.

NOTE: The details in this conversation might help others with the same inquiries as me.

Thanks a lot!
Fran

[amilajack]

Why is sass listed under limitations if it is intentionally not supported?

[gaearon]

@amilajack Is “limitation” a wrong word for unsupported features?

[amilajack]

I feel like limitation has the wrong connotation. To me, using 'limitations' almost is almost equivalent to using 'drawbacks' in its place. IMO, something like Unopinionated Features would make more sense.

Thoughts?

[rickharrison]

For those looking to include sass, I've published a library to accomplish that without using a creact-react-app fork: https://github.com/rickharrison/create-react-app-sass

[gaearon]

We now have official Sass integration documentation.
Feel free to contribute if something is missing!

[gaearon]

Sass is now supported directly.
https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

[selbekk]

Is there plans of adding Less support? We use it for our design system, and I'd love to add a pull request adding it.

[mrmckeb]

@selbekk, not at this stage (that I'm aware of), but one quick solution is to create a fork of react-scripts, add LESS to that webpack config, and then use that instead of our version. As it would be a small change, it would be very easy to keep up to date with the upstream.

There are other options, like Rescripts, but they're not recommended as you could break stuff.

[selbekk]

@mrmckeb oh it's easy enough to get working, but it'd be a huge convenience to (for example) create simple sandboxes in codebases that use LESS. :) Like, our design system is based on LESS, and I'd love to add simple reproductions of bugs or whatever with our pull requests and issues.

I guess I could create a fork of react-scripts and just switch out the react-scripts dependency with my own in the sandboxes, but making it a part of the library would be even better.

The bigger question is why not support it, when css modules and sass already is supported?

[mrmckeb]

@selbekk, I wasn't on the team when the decision was made, but as a general rule, more features means more things can go wrong - and it means that every change we make needs to be considered against more variables, which can slow down the project as a whole.

That being said, we're always open to discussion. If you'd like to open an issue, we can discuss this further.