create-react-app (without ejecting) + bourbon/neat?

Question

I'm rewriting an "old" React prototype that uses Bourbon, it also uses gulp-sass in a gulpfile to inject a node-neat dependency:

var sassOptions = {
    includePaths: require('node-neat').includePaths,
};

I'd like to use the create-react-app boilerplate and have a "simple" workflow for the styles by using an npm script to compile the sass files (also because create-react-app restricts you on that) but I can't figure out how to do that.

"build-css": "node-sass src/styles/ -o src/",
"watch-css": "npm run build-css && node-sass src/styles/ -o src/ --watch --recursive"

I'll probably rewrite the styles in the future using a different approach (maybe use styled components, maybe keep using Sass and dismiss Bourbon entirely) but I just need to port the Sass styles from the old project for now.

Any ideas on integrating create-react-app (without ejecting) and Bourbon/Neat?

Is there a way to get the neat.includePaths bit into the node-sass one-liner script in package.json, for example?

Jupiter

Minor side note but you should probably swap out node-neat for bourbon-neat. node-neatis a port and tends to be behind the official release. npmjs.com/package/bourbon-neat – Airglow

thanks a lot man. any help is greatly appreciated. – Jupiter

Your best bet is to check outNeat NPM documentation at github.com/thoughtbot/… As an alternative you may want to try eyeglass.rocks as a way of handling your sass and dependencies. Sadly react is pretty outside of my wheelhouse so that's the best advice I can give. – Airglow

hey did you ever end up finding a solution to this? – Heartstrings

Answer 1

As far as I know, you can not evaluate the includePaths you need to be able import Bourbon and Neat through the one-liner in package.json.

However, you can still use Bourbon +Neat with your non-ejected React app. If you keep your package.json changes as described by React here, install the gems on your machine and install them locally in your Sass directories where you see fit. As an example;

• /src
  • /styles
    • /vendors
      • /bourbon
      • /neat
      • /other-sass-library
    • /base
    • /layout
    • /...
  • App.js
  • ...

When having the gems installed, you run the commands where you want them installed. bourbon install --path <some-path> and neat install.

When you can reference Bourbon and Neat this way, it's no problem to simply @import vendors/bourbon/bourbon etc.

Of course, this way of managing styles are not on par with the co-located, module thinking of React/Webpack, but sometimes there's definitely a need for a fully controlled Sass styles tree.

Mhd