Webpack: cannot resolve select2 images in dist/css

[literat]

I tried to use bootstrap-ui from npm and manage all my styles, scripts and images with webpack.

But css-loader run into a problem with resolving image paths.

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './select2-spinner.gif' in '/node_modules/bootstrap-ui/dist/css'

There are three proplematic images:

• select2-spinner.gif
• select2.png
• select2x2.png

all in node_modules/bootstrap-ui/dist/css/bootstrap-ui.css.

I have temporarily solved this issue by copying these images from /node_modules/bootstrap-ui/bower_components/select2 to dist/css folder.

Can you please help me how to solve this issue permanently or provide more durable solution? Thank you.

[bedrich-schindler]

Hello,

It is our fault. Although we have released new version and changed the documentation, we haven't deploy it to docs.bootstrap-ui.com yet. It is gonna be done after the weekend. Neverthless it can be found at https://github.com/visionappscz/bootstrap-ui/blob/master/src/less/homepage.md

JavaScript and CSS files in dist folder are just minified files, those files does not contain dependency libraries like bootstrap, jquery, select2 etc. You have to import them manually. Principles does not changed from previous version, you just need to import them fromnode_modules instead of bower_components.

I am not a front-end guy, my front-end collegues might be more clever than me but there exists less variable @external-components-pathwhich is newly set to node_modules/ as default (instead of bower_components/) and it can be overridden by you, so check if it is set correctly. Also check if select2 and other deps are installed in node_modules. At one of our projects, I switched BUI to version 3.0 using grunt and everything works so I hope it will work on webpack as well. If this does not help, please write back to solve it with our front-end guys.

[literat]

Hi,

thank you for your support and hint with @external-components-path. It was very usefull although I cannot use relative path and I have to specify path as @external-components-path: '~'; and let a webpack resolve it for me (inspiration came from here: https://github.com/webpack-contrib/css-loader/issues/253)

I am also not a frontend guy but at this time it just works. Thank you for your help.

[kathryn-thompson]

I have this same issue but can't see how to resolve it using LESS.

I'm using bootstrap-ui 3.0.0.

Can you assist?

[kathryn-thompson]

For others who have been struck on this; my workaround is this in package.json

"postinstall": "cp node_modules/bootstrap-ui/node_modules/select2/*.png node_modules/bootstrap-ui/dist/css/ && cp node_modules/bootstrap-ui/node_modules/select2/*.gif node_modules/bootstrap-ui/dist/css/"

It's far from ideal but seems to work