As I was listening to the latest episode of Syntax—Wes Bos’ and Scott Tolinski’s great new podcast on front-end web development—the question was posed among the hosts over how they integrated front-end libraries—and more specifically, their CSS—into their own code while keeping everything up-to-date. Both admitted that they didn’t have a great answer (usually involved copying and pasting), so I thought I would share a system that works for me.
Most front-end libraries these days are kept on some sort of package management system. Usually this is NPM, but could also be Bower or something else. Assuming NPM, I would load it like I would any other node module, and save it to my package.json file. Take one of my go-to libraries, Breakpoint Sass. I’d install it like so:
npm install --save breakpoint-sass
Now, to include the Sass into my project, I would reference it as I would any other Sass partial, by writing the following line somewhere near the top of my main Sass file (following the path relative to where my main Sass file is located):
@import "../../node_modules/breakpoint-sass/stylesheets/breakpoint";
Obviously the exact path is going to depend on how your project files are organized, but you get the drift.
This works just as well for components like form element prettiers (think something like Nice Select), or anything else that enhances the visual design of your project. Often in those cases, it makes more sense to put the @import statement near where you will be adding in your own CSS to customize the look to your design.
I hope to expand upon this post a little more at some point to give some more workable examples, but for now, ping me in the comments or on Twitter if you have questions on how I do this.
Great tip, Tracy!