Copy to resources/assets folder after yarn add?

sage
1

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.

2

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
3

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

4

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 https://github.com/thoughtbot/bitters/pull/30 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 https://github.com/webpack-contrib/sass-loader#imports
*/

/** 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.

2 Likes
5

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