Optional Sass support - Part 2

As I just read in https://github.com/facebookincubator/create-react-app/issues/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!

[Fangmingdu]

why don’t you add an option for adding sass/less to the project when create a new project like: create-react-app my-app --style=sass otherwise, the default should still be css and not including any additional sass loaders.

This was used similarly in angular-cli project, link here

[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 [e-mail] 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.