Bootswatch in Webpack

Post by Saul Shanabrook

If you are trying to figure out how to best use Bootswatch with webpack, I think I have it down.

Some other people have also struggled with getting it to work. It isn't as simple as just importing the css file from the npm installed package, because the relative paths are all messed up.

The solution is to use the less files and import them all.

  1. Install and enable the less loader.
  2. Install bootswatch (npm install bootswatch --save)
  3. Create less file with imports (as shown below)
  4. Import that less file in any JS[X] file (import './bootswatch.less')

This is what your bootswatch.less file should look like, substituting whatever theme you want for cyborg.

@import "~bootstrap/less/bootstrap.less";
@import "~bootswatch/cyborg/variables.less";
@import "~bootswatch/cyborg/bootswatch.less";