Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting up CSS Preprocessor with npm commands #404

Closed
pankajpatel opened this issue Aug 8, 2016 · 13 comments
Closed

Setting up CSS Preprocessor with npm commands #404

pankajpatel opened this issue Aug 8, 2016 · 13 comments

Comments

@pankajpatel
Copy link

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
Copy link
Contributor

gaearon commented Aug 8, 2016

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
Copy link
Author

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
Copy link

techniq commented Aug 12, 2016

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
Copy link
Author

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
Copy link
Author

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

@HriBB
Copy link

HriBB commented Aug 24, 2016

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
Copy link

techniq commented Aug 24, 2016

@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
Copy link

I would like to have support for stylus.

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

@gaearon
Copy link
Contributor

gaearon commented Aug 31, 2016

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
Copy link
Contributor

gaearon commented Aug 31, 2016

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
Copy link
Contributor

gaearon commented Aug 31, 2016

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 gaearon closed this as completed Aug 31, 2016
@tobyl tobyl mentioned this issue Jan 9, 2017
@gaearon
Copy link
Contributor

gaearon commented Feb 12, 2017

This is now explained in the Sass integration documentation.

@pankajpatel
Copy link
Author

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

@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants