Choices: How to use choices.js on webpack?

[lion-man44]

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';

[lion-man44]

I'm not use scss-loader .
I'm use css-loader and postcss-loader .

I see.
In other word's, can't solve it as long as choices.js/assets/styles/css/choices.css it used.
Hmm...

[jshjohnson]

From what I've understood, this problem is being caused by the relative path, right? If it's changed to absolute, it works?

[lion-man44]

Yes.
As far as I'm try is no problem.
url('/cross.svg') // => no error
url('/assets/images/cross.svg') // => no error
url('assets/cross.svg') // => error

[lion-man44]

It seems better to send a PR?

[korywka]

your webpack config resolves svg extension?

{ test: /\.(jpg|png|svg|gif)$/, loader: 'file-loader?name=images/[hash].[ext]' },

[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.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.