Optional Sass support - Part 2

[BrodaNoel]

As I just read in #78, CRA don't want to add support to Sass and Less.

Then, I read Dan saying:

Let’s revisit this topic in the beginning of 2017.

So, what's the state of this?
I few hours ago I implemented Sass and Less in a personal project out of CRA.
I just added a new rule in webpack modules, and a couple of dependencies and Gualá!
Following this example, we should do not deal too much with this implementation: https://github.com/webpack-contrib/sass-loader#examples

Something really nice in those loaders is that it's not necessary to convert Sass to CSS explicitly.
So, as all loaders do, just including the .scss file is enough.

I read tons of times that you repeat the same question: "Why you guess Sass is necessary in React?". Well, in my case, I don't use Sass to reutilize CSS. I use Sass to write CSS as a tree, and it's useful to define vars that are useful to create a template structure in the site/component.

My best example (tree view, vars, cals, and imports that can be used to define the whole site styling):

@import './base/colors.scss';

.Xxxxx {
  $width: 30px;

  position: fixed;
  right: 10px;
  bottom: 10px;
  width: $width;
  height: $width;
  border: 1px solid $color-primary;
  border-radius: 5px;
  cursor: pointer;

  > i.anticon-smile-o {
    color: $color-primary;
    font-size: calc(#{$width} * 0.60);
    line-height: $width;
  }
}

If you think it's time to add Sass, I can create a PR with those chances (or, at least, I'll try).
If not, ok.

Thank you!

[cr101]

@BrodaNoel CRA added SASS support a while ago if that's what you are asking for.

[BrodaNoel]

Nop. That's support for pre-processors (from Sass to Css), and then You have to include the CSS file, instead of the .scss. I'm asking if we can add the Sass loader to our Webpack config, so then will not be necessary to do those changes in package.json, or install new dependencies (as you can read in that doc you shared)

…

El 8 jun 2017, a las 02:45, Cristian Rosescu ***@***.***> escribió: CRA has been providing SASS support for a while now — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[cr101]

I'm asking if we can add the Sass loader to our Webpack config, so then will not be necessary to do those changes in package.json, or install new dependencies (as you can read in that doc you shared)

I'm with you now. I agree that being able to import .scss files would be awesome and very helpful.
Most popular CSS frameworks like Bootstrap 4, Foundation Sites, Materialize, etc all use SASS.
And being able to only import the SASS components you need instead of the entire CSS framework would greatly reduce the size of the pages by only shipping the code that you need.

[BrodaNoel]

Absolutely! I have the same problem with ant.design, but at least ant has all CSS isolated (for each component), so I have no that size problem.
But yes, I would be really great if we have the Sass support.

[yeluolei]

need for Less support too if you want to use ant.design

[ruler47]

So someone is trying find solution for this issue? Is it worth waiting for the support of scss?

[timarney]

@BrodaNoel @ruler47
This code needs to be updated to support react-scripts 1.0 but is this the sort of thing your looking for https://github.com/timarney/react-app-rewired/blob/master/packages/react-app-rewire-sass/index.js

Might be a workaround to get you what you need for now.

[Timer]

@ruler47 I'd like to note that it is not required to eject to use Sass. Please read the following guide.

[gaearon]

I'm open to supporting Sass but only if people not using it don't have to get sass-loader or node-sass installed as part of react-scripts. This is similar to my concern about supporting Relay.

These use cases call for a plugin system but I don't think we're ready to support a whole addon ecosystem that's one step removed from webpack. So this is where it breaks down a little.

Suggestions?

[viankakrisna]

configComposer from #2449? 😜

*presed comment prematurely.

I'm thinking about https://github.com/webpack-contrib/npm-install-webpack-plugin
but then, the config should be resolved too

[gaearon]

Another concern is that I want config to be simple for people who eject. I don't want Sass to be there if they don't use it, but I also don't want Sass users to end up with an abstraction there.

[viankakrisna]

It's still configurable (with the same webpack API) if we place the resolvers in the config folder though. Just that it's in another place with resolving and installing logic. Like you said, it's still one step removed from regular webpack configuration object.

[KaRkY]

When can we expect a solution for this to come out? Because this is a blocker for me and I can not find suitable replacement for CRA that is actually maintained.