CSS：選択した背景画像が反応していない

Question

select背景画像が実際のCSSで動作する問題があります。まず、私は、次のファイル構造を持っているすべての：

/src 
|- globals.scss 
|- /images 
    |- caret.png 
|- /components 
    |- /Login 
     |- container.js 
     |- style.scss 
     |- ui.js 

基本的には、container.jsは./style.scssをインポートui.jsがレンダリングされます。このファイルは@import /src/globals.scss;で始まります。これはすべて正常に動作しますが、ここに私の問題があります。カスタム背景画像を使用して選択ボックスのアイコンを変更しようとしています。このコードはglobals.scssにあります。すべての選択ボックスでこれを同じ画像に変更したいからです。

select { 
    outline: none; 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 

    padding-right: 23px; 
    background: url("caret.png") no-repeat right 5px center; 
    background-size: 13px 8px; 

    height: 40px; 
    border: 1px solid #e6e6e6; 
    padding-left: 5px; 
    background-color: #fff; 
} 

select::-ms-expand { 
    display: none; 
} 

これは、次のエラーを生成します：

./src/components/Login/caret.png 
Module build failed: Error: ENOENT: no such file or directory, open 'C:\[...]\src\components\Login\caret.png' 

は、だから私は何をしたか正常に動作し、「ログイン」フォルダに不足しているファイルを追加することです。このCSSは次があります。しかし私にとっては、多くのコンポーネントにselectがあるので、これは良い解決策ではありません。また、選択したいすべてのコンポーネントにイメージをコピーする必要があります。私が見つけたのは、backgroundをbackground: url("/src/images/caret.png") no-repeat right 5px center;に変更しようとする可能性があるということでした。私がこれをしたとき、エラーは消えましたが、画像も選択ボックスから消えました（はい、ファイルは "画像"フォルダにあります、私はチェックしました）。

どうすればこの問題を解決できますか？

私はsass-loaderでwebpackを使用していますが、このプロジェクトの設定は行っていません。何か問題があった場合にwebpack設定が実際にどのように機能するかはわかりません。

サイドノート：実際にはうまくいきましたが、イメージをbase64に変更しようとしましたが、必要なすべてのイメージをbase64に変更する必要のないソリューションを探したいと思いますこれを同様のやり方で再度変更してください。また、すべてのブラウザでbase46が動作しているかどうかはわかりません。可能な限りクロスブラウザをサポートしたいと思っています。

Answer 1

あなたはsass-loaderでurl問題を読んでください：あなたのWebPACKの設定でhttps://github.com/webpack-contrib/sass-loader#problems-with-url

通常ますresolve-urlを。