html - CSS:选择中的背景图像在 React 中不起作用

Question

我在使用 CSS 在 React 中使用 select 背景图片时遇到了问题。首先，我有以下文件结构:

/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 中，因为我想将所有选择框中的此更改为相同的图像。此 CSS 具有以下内容:

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'

所以我所做的是将丢失的文件添加到“登录”文件夹中，效果很好。但对我来说，这不是一个好的解决方案，因为我将在许多组件中使用 select 并且必须将图像复制到我想要选择的每个组件中感觉非常愚蠢。我发现我可以尝试将 background 更改为 background: url("/src/images/caret.png") no-repeat right 5px center;。当我这样做时，错误消失了，但图像也从选择框中消失了(是的，该文件存在于“图像”文件夹中，我已经检查过了)。

我该如何解决这个问题？

我将 webpack 与 sass-loader 一起使用，但我没有为这个元素进行设置，而且我不知道如果出现问题，webpack 配置实际上是如何工作的。

旁注:我尝试将 url 更改为图像的 base64，这确实有效，但我想找到一个解决方案，如果我需要更改，则不需要将每个图像都更改为 base64这再次以类似的方式或其他地方。此外，我不确定 base46 是否适用于所有浏览器，我希望尽可能支持跨浏览器。

Answer 1

您应该阅读 sass-loader 的 url 问题:https://github.com/webpack-contrib/sass-loader#problems-with-url

通常是你 resolve-url在你的 webpack 配置中。