I haven’t messed with Sage 9’s webpack stuff too much, but typically you would pull in all dependencies from your JavaScript.
import 'font-awesome'
or
require('font-awesome');
As it turns out with Font Awesome, however, this won’t work! It’s because the Font Awesome fellas haven’t defined any entry points in their package.json file and they don’t have an index.js file in their repo. You could manually import the SCSS/LESS/whatever as needed, however, but instead I would recommend using font-awesome-webpack.
And in case you’re wondering how it goes from JS to CSS, that’s handled with these two loaders:
As you can see, we use the extract-text-webpack-plugin to pull the CSS/SCSS out of your JS and dump them into their own files. This is a fairly typical way of doing it these days, so most of your packages will be imported via JS.
Of course, we’re still working on Sage 9 and things might change before it’s finalized. Also, it’s worth noting that we all typically defer to @austin for this stuff, so if he says something that contradicts me, he’s right. lol
I’m trying to use Sage 9 with UIKit (instead of Bootstrap). UIKit comes with Font Awesome as part of the package.
My main.scss file looks like this: $icon-font-path: "~uikit/dist/fonts"; // reset the existing variable to the correct path; not doing so causes npm build to fail due to incorrect path @import "~uikit/dist/scss/uikit.scss";
By settng $icon-font-path, it correctly finds the FA fonts inside of UIKit. However, when it comes to running the build tool, it puts the fonts in:
/dist/_/node_modules/uikit/dist/fonts/
It should go in /dist/fonts/
How do I make it so it’s cleanly put inside of /dist/fonts/?
I tried using font-awesome-webpack but it just gave me the same results. You might have to wait until the people over at fontawesome add support for webpack or do a pull request yourself
Also couldn’t help but notice UIKit uses gulp, are you using gulp/bower and sage 9?