CSS : 선택 영역의 배경 이미지가 작동하지 않습니다.

Question

select 배경 이미지가 React wth 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;으로 바꿀 수 있다는 것입니다. 이 작업을 수행 할 때 오류가 사라졌지만 이미지가 선택 상자에서 사라졌습니다 (예, 파일이 "images"폴더에 있음, 확인했습니다).

어떻게 해결할 수 있습니까?

sass-loader와 함께 webpack을 사용하고 있지만이 프로젝트의 설정을 수행하지 않았으며 뭔가 잘못되었을 때 webpack 구성이 실제로 어떻게 작동하는지 알 수 없습니다.

사이드 노트 : 나는 실제로 작동하는 이미지의 base64가되도록 URL을 변경하려고했지만 필요한 모든 이미지를 기본 코드로 변경할 필요가없는 해결책을 찾고 싶습니다. 비슷한 방식으로 또는 다른 곳에서 다시 변경하십시오. 또한 모든 브라우저에서 base46이 작동하는지 확실하지 않으며 가능한 한 크로스 브라우저를 지원하고 싶습니다.

Answer 1

당신은 sass-loader으로 url 문제를 읽어야 당신의 웹팩 설정에서 https://github.com/webpack-contrib/sass-loader#problems-with-url

일반적으로 당신 resolve-url을.