Create-react-app: After ejecting, unsure of how to add Bourbon / Neat to webpack

[lukerollans]

I am migrating an existing, server-rendered front-end to a React app. Woo! 🎉

It's my first pure javascript front-end, so I'm a little rusty with things like webpack. I need to bring over Bourbon and Neat which I previously setup in Brunch, so I understand the necessity for include paths etc.

After ejecting, I made the following modifications..

_package.json_

"devDependencies": {
    ...
    "bourbon": "^4.2.7",
    "bourbon-neat": "^1.8.0",
    ...
}

_config/paths.js_

// config after eject: we're in ./config/
module.exports = {
  ...
  appSrc: resolveApp('src'),
  bourbon: require("bourbon").includePaths,
  bourbonNeat: require("bourbon-neat").includePaths,
  ...
};

_config/webpack.config.dev.js_ (after also installing node-sass which is working great)

// SASS compatibility!
{
  test: /\.scss/,
  include: [
    paths.bourbon,
    paths.bourbonNeat,
    paths.appSrc
  ],
  loaders: ["style", "css", "sass"]
},

After this, it's my understanding that simply @import "bourbon" from App.scss should work, but I'm getting.

Failed to compile.

Error in ./src/App.scss
Module build failed:
@import "bourbon";
^
      File to import not found or unreadable: bourbon
Parent style sheet: stdin

Does anyone see where I might be going wrong?

[lukerollans]

After a tiny bit more research I was able to solve it myself. I realised I needed to path the include paths to node-sass, not the loader (which I now understand is a different thing).

Here is what cleared it up for me
https://github.com/jtangelder/sass-loader#sass-options

Hopefully this helps someone else in the future 🎉

[designbyadrian]

@lukerollans Could you paste your solution, please.

[lukerollans]

@designbyadrian The above is very slightly out of date if you're using the latest version of create-react-app.

Read this article, plus the comments for a complete guide
https://medium.com/@Connorelsea/using-sass-with-create-react-app-7125d6913760#.ux7zzchnq

[designbyadrian]

@lukerollans Thank you, but neither article explains how to properly use the value returned from require("bourbon").includePaths as an includePath.

[lukerollans]

@designbyadrian Yes they do :)

webpack.config.dev.js

  sassLoader: {
    includePaths: [
      paths.bourbon,
      paths.bourbonNeat
    ]
  },

config/paths.js (How I do it, anyway)

// config after eject: we're in ./config/
module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  bourbon: require("bourbon").includePaths,
  bourbonNeat: require("bourbon-neat").includePaths,
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  ownNodeModules: resolveApp('node_modules'),
  nodePaths: nodePaths
};