Cant get bourbon files imported in my site (show tree in post)

I believe a picture best describes my issue

Please see img for tree document

My issue is a simple one, but I am not getting my main.sass which imports all the other sass files to for compiling to display the bourbon assets, so my site isnt rendering the bourbon assets

I have tried the basic @import ../css/1-tools/bourbon but that doesnt work

Any help appreciated as the css isnt working now :(

Solution

Since you are all ready using gulp, try using the actual Bourbon NPM package. You can add it to your package.json file and require it via your gulpfile.

How to: https://github.com/thoughtbot/bourbon#installing-with-npm-and-using-a-node-based-asset-pipeline
Here is the page for the Bourbon package: https://www.npmjs.com/package/bourbon
Here is an example gulpfile that uses bourbon (with some other stuff you can probably ignore): https://github.com/thoughtbot/bitters/blob/master/Gulpfile.js

The main parts of this example gulpfile that you would need to add are the require on line 1 and adding bourbon to your Sass includePaths on line 17.

edit ⤵

Once this is set up you'll want to change your sass import to the following:

@import "bourbon";

Because of the addition to includePaths, gulp-sass will know where to look. 🔎