How to use choices.js on webpack?

I’m using webpack.

./node_modules/.bin/webpack -v
3.5.2

I tried choices.js. However happend build error. It is because svg file can not found.

// resources/css/admin/app.css
@import "choices.js/assets/styles/css/choices.css";

$ webpack

ERROR in ./resources/css/admin/app.css
Module not found: Error: Can't resolve '../../icons/cross-inverse.svg' in '/Users/orange-lion/**/resources/css/admin'
 @ ./resources/css/admin/app.css 6:150116-150156

ERROR in ./resources/css/admin/app.css
Module not found: Error: Can't resolve '../../icons/cross.svg' in '/Users/orange-lion/**/resources/css/admin'
 @ ./resources/css/admin/app.css 6:151469-151501

I know that it will work if it is an absolute path.

.choices[data-type*="select-one"] .choices__button {
  background-image: url("/assets/icons/cross-inverse.svg");
  padding: 0;
  ...
}

This code will not faild to build. But, it is to edit directly node_modules/choices.js/assets/styles/css/choices.css I don’t want to do it.

Are you have any good idea?

[Edit] Can copy that file, but that is not a good solution. Because it will not keep up with the version upgrade.

[zackschuster]

Overwrite the icon path prior to import:

$choices-button-icon-path: "~choices.js/assets/icons";
@import '~choices.js/assets/styles/scss/choices';

Coincidentally, you need to do something similar for font-awesome:

$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome';

[danfraticiu]

I fixed this issue by using svg-url-loader with this is webpack config:

module: {
    rules: [
        ...
        {
            test: [
                /choices\.js\/.*\.svg/
            ],
            use: {
                loader: 'svg-url-loader',
                    options: {}
                }
            }
        }
    }
}

This will inline the cross.svg image as base64.

Also you have to @import the choices.css

Later Edit:

Upon rereading, you issue might be different… I fixed that issue by using @import (less) instead of @import (inline), but I use less… so this won’t work for everyone.