Unable to import Blueprint 2 in LESS through webpack

[kaiyoma]

Bug report

• blueprint version: 2.0.0-beta.3
• webpack version: 3.10.0

Steps to reproduce

I also posted about this here but haven't heard anything.

The Blueprint docs say to use this:

@import "~@blueprintjs/core";

However, if I try that, I get this error from webpack:

Can't resolve '@blueprintjs/core.less'

#123 deals with similar issues and a lot of people suggested using this:

@import "~@blueprintjs/core/dist/blueprint.css";

webpack doesn't like that either:

Module not found: Error: Can't resolve '@blueprintjs/core/dist/blueprint.css'

Looking in the dist/ directory, I can see that there's only a JS file in there:

$ ls node_modules/\@blueprintjs/core/dist/
core.bundle.js

After some trial and error, I found that this works:

@import "~@blueprintjs/core/lib/css/blueprint.css";

But this doesn't seem right to me. Also, none of the icons are loaded via this method.

What's the correct way to do this?

[adidahiya]

Icons are not included in blueprint core anymore; there's a new package called @blueprintjs/icons.

@import "~@blueprintjs/core/lib/css/blueprint.css";

this is correct. most of the built assets moved from /dist/ to /lib/.

[kaiyoma]

Ah, okay, I don't think that's in the docs anywhere. It looks like your v2 docs don't reflect some of the changes that have been made since v1.

For posterity:

1. Both @blueprintjs/core and @blueprintjs/icons need to be installed.
2. In your LESS, import both Blueprint stylesheets:

@import '~@blueprintjs/core/lib/css/blueprint.css';
@import '~@blueprintjs/icons/lib/css/blueprint-icons.css';

3. Make sure to add appropriate loaders to your webpack configuration (for LESS/CSS files and the icon fonts).