vue + selected-js：无法使用 selected-sprite.png 导入 selected-js 的 css答案

【问题标题】：vue + chosen-js: can not import css of chosen-js with chosen-sprite.pngvue + selected-js：无法使用 selected-sprite.png 导入 selected-js 的 css
【发布时间】：2019-04-09 01:12:20
【问题描述】：

我正在使用 npm、Vue 和 Webpack。我想在 jQuery 中使用 Chosen 库，但我无法导入 chosen-js/chosen.css，因为出现错误。如何导入 Chosen 的 css 文件？

代码：

<script>
import $ from 'jquery';
window.$ = window.jQuery = $;
import chosen from 'chosen-js';
import 'chosen-js/chosen.css';

export default {
    mounted: function() {
        $('.select').chosen({
            search_contains: true,
        });
    },
};
</script>

<template>
    <div>
        <select class="select">
            <option selected>aaa</option>
            <option>bbb</option>
            <option>ccc</option>
        </select>
    </div>
</template>

错误：

ERROR in ./node_modules/chosen-js/chosen-sprite.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

【问题讨论】：

你可能需要一个 webpack 的图像加载器：npmjs.com/package/image-webpack-loader
哦，谢谢。我将文件加载器添加到 webpack.config.js，效果很好。
我添加了一个答案供以后的读者查看。很高兴它成功了。

标签： vue.js npm webpack jquery-chosen

【解决方案1】：

尝试添加一个图像加载器，以便 WebPack 知道如何处理 png 文件。这还将为您提供在捆绑过程中压缩图像文件的选项。这是一个链接：https://www.npmjs.com/package/image-webpack-loader

【讨论】：

【解决方案2】：

安装并将文件加载器添加到 webpack.config.js，效果很好。

【讨论】：