Skip to content

Less/Sass #351

Closed
Closed
@franleplant

Description

@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

Activity

vjeux

vjeux commented on Aug 4, 2016

@vjeux
Contributor

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

eliperelman commented on Aug 4, 2016

@eliperelman
Contributor

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

gaearon commented on Aug 4, 2016

@gaearon
Contributor

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

franleplant commented on Aug 4, 2016

@franleplant
Author

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

amilajack commented on Sep 24, 2016

@amilajack

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

gaearon

gaearon commented on Sep 24, 2016

@gaearon
Contributor

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

amilajack

amilajack commented on Sep 24, 2016

@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

rickharrison commented on Oct 11, 2016

@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

gaearon commented on Feb 12, 2017

@gaearon
Contributor

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

added a commit that references this issue on Mar 30, 2017
added a commit that references this issue on Jul 3, 2018
608e0e2
gaearon

gaearon commented on Oct 2, 2018

@gaearon
Contributor
selbekk

selbekk commented on Dec 19, 2018

@selbekk
Contributor

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

mrmckeb commented on Dec 19, 2018

@mrmckeb
Contributor

@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

selbekk commented on Dec 19, 2018

@selbekk
Contributor

@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

mrmckeb commented on Dec 19, 2018

@mrmckeb
Contributor

@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.

locked and limited conversation to collaborators on Jan 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @rickharrison@vjeux@eliperelman@gaearon@selbekk

        Issue actions

          Less/Sass · Issue #351 · facebook/create-react-app