Copy to resources/assets folder after yarn add?

So, I want to add bourbon, bourbon-neat, and bourbon-bitters to my project using “yarn add”.

Problem is I need the sass files from bourbon-neat and bourbon-bitters to be in my resources/assets/styles folder after addition. How would I go about doing this? I know by default they’d probably go to the node_modules folder.

If you just want to include Bourbon in your scss, you don’t need to move its files. Just add an @import "~bourbon/bourbon" in your scss entry point.

1 Like

Thanks, that’s great. However, what about Neat and Bitters, which need to be copied in order to be edited?

Since Bitters is meant to be heavily modified and used as a starting point, there isn’t a good reason to include it with a package manager - see for discussion around that.

Just install via the ruby gem or copy manually to your preferred location (I have mine at /resources/assets/styles/base/) then include in your main.scss after you’ve included Bourbon:

// main.scss
@import "~normalize.css/normalize";
@import "common/variables";

/** Import everything from autoload */
@import "./autoload/**/*";

* Import npm dependencies
* Prefix your imports with `~` to grab from node_modules/
* @see

/** Bourbon & Bitters */
@import "~bourbon/core/bourbon";
@import "base/base";

/** Import theme styles */
@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

Edit: I don’t use Neat, but I would assume it’s similar.


I was not aware of that. This does not answer my question, but it taught me what I didn’t know I needed to learn. Thank you.

1 Like