Create-react-app: Setting up CSS Preprocessor with npm commands

[pankajpatel]

I loved the utility and enjoyed working with default configuration without needing to configure anything.

Though after getting used to LESS/SCSS, I want to use it in the project.

But PostCSS is also a great tool, so don't wanna remove from the workflow. Though working with only CSS files makes it difficult sometimes and to plug preprocessor, it would require to eject from default config.

Like ionic, it would be good to have features; e.g. in ionic running ionic setup sass will setup the project for SASS/SCSS related workflow and and files; similarly running similar will set it up for LESS or SASS/SCSS

This would keep default scripts and need not to eject.

[gaearon]

We will likely revisit styling in a few months and see if we want to add support for something like that.
For now this is not a priority since you can use Create React App with Less or SASS by using their CLIs:

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

[pankajpatel]

node-sass ./src/scss/app.scss -w -o ./src/css

Yeah, looks clean and good alternative for the moment. Though I think it is worth adding.

Or this cmd can run with the start and build scripts of create-react-app without -w

[techniq]

Another alternative is you could reference the loaders explicitly in the import statement. For example, first install the loader/dependencies

npm install --save-dev sass-loader node-sass

Then declare the loaders explicitly:

import 'style!css!postcss!sass!./App.scss';

There are a lot of issues with this approach though:

• Tying project to Webpack (if create-react-app ever changes the underlying system, this will break)
• Imported styles using this methods won't be extracted with ExtractTextPlugin in production
• I'm sure there are more issues I haven't identified yet

[pankajpatel]

How about specifying the preLoaders in webpack config:

{
  test: /\.(css|scss)$/,
  include: [paths.appSrc, paths.appNodeModules],
  preLoaders: [
    {
      test: /\.scss$/,
      loader: 'sass',
      include: paths.appSrc,
    }
  ],
  loader: 'style!css!postcss'
},

[pankajpatel]

Sassport can be used for this: https://github.com/davidkpiano/sassport

[HriBB]

I haven't tried create-react-app yet, but I've been monitoring the conversations and analyzing the code to learn and figure out how to improve my apps/setups. It's amazing to see so many smart people come together and share their knowledge. If only this project existed six months ago, when I started learning React/Node/Webpack/... :)

Like many of the users, I miss sass. I am just too damn used to it. I hope when you revisit styling, you find good solution ... that I can copy-paste into my app haha :)

I also miss hot reloading, but I totally understand why it's not included. RHL3 needs some finishing touches, to say the least.

Anyway, I promise to try create-react-app when there is no need to eject for every little change you need to make to the "core".

Just an idea, but it would be really cool if some day one could do something like

npm install -g create-react-app

create-react-app my-app
cd my-app/
create-react-app enable-module sass|cssnext|whatever
create-react-app disable-module sass|cssnext|whatever
npm start

Or maybe load some functionality via preset/plugins like we do with babel

npm install --save create-react-app-plugin-sass

Then add to a list of plugins in .reactrc

{
  plugins: ["sass"]
}

[techniq]

@HriBB You may be interested in taking a look at nwb. The recent 0.12 version has a similar quick setup like create-react-app, but also allows using plugins, including sass, to augment the setup. There is also a guide to switch to nwb from create-react-app.

[kulakowka]

I would like to have support for stylus.

Could you add the stylus-loader for *.styl extensions?

[gaearon]

Another alternative is you could reference the loaders explicitly in the import statement.

We don’t support this feature.
If you use it, please expect that it can break in any patch version without a warning.

[gaearon]

Anyway, I promise to try create-react-app when there is no need to eject for every little change you need to make to the "core".

If you want to make changes, you are a power user, and this project may not be the right fit for you 😄 . That said you can always fork react-scripts and add what you’re missing. Then you can run

create-react-app myapp --scripts-version my-fork-of-react-scripts

and it will use them instead. Of course you’ll miss out on our updates unless you take care of merging upstream changes into your fork.

[gaearon]

I’ll close this issue because we currently have no intentions on making CSS preprocessors a part of CRA setup. If you want to use one, please do as you did before Webpack: write SCSS/Less/Stylus/whatever and compile them to CSS with a CLI command. Then import resulting CSS into the project.

[gaearon]

This is now explained in the Sass integration documentation.

[pankajpatel]

Thanks @gaearon! Meanwhile, I created a basic boilerplate for myself to choose between less and scss after ejected create-react-app https://github.com/pankajpatel/kickstart-react