Create-react-app (no push) + bourbon / trim?

Question

I am rewriting the "old" React prototype that uses Bourbon, it also uses gulp -sass in the gulpfile to insert the node -neat dependency:

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

I would like to use a template template create-react-appand have a “simple” workflow for styles using an npm script to compile sass files (also because the create-react-app application limits you), but I cannot figure out how to do this.

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

I will probably rewrite the styles in the future using a different approach (maybe use stylized components, maybe keep using Sass and completely drop Bourbon), but I just need to port the Sass styles from the old project now.

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

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

Answer 1

As far as I know, you cannot evaluate includePaths, you need to import Bourbon and Neat through a single-line layer in package.json.

, Bourbon + Neat React. package.json, React , Sass, . :

• /
  • /
    • /
      • /
      • /
      • /--
    • /
    • /
    • /...
  • App.js
  • ...

, , . bourbon install --path <some-path> neat install.

Bourbon Neat , @import vendors/bourbon/bourbon ..

, , React/Webpack, Sass.