如何配置 vite 来加载从 node_modules 导入的样式表中的相关图像？

Question

我有一个应用程序，它使用 UIkit，Less 用于本地样式，Vite 用于前端工具（捆绑等）。我不确定这是否相关，但这是一个 Vue 2/Webpack 应用程序，我正在升级到 Vue 3/Vite。

根据 UIkit 的 Less 文档，我们将 UIkit 的 uikit.theme.less 文件导入到我们项目的基本文件较少。 UIkit 的样式表有一些到 SVG 文件的相对路径，这些路径通过 less 的 data- 运行uri 函数（示例如下）。这在 Webpack 中工作得很好，但在 Vite 中却不太有效。据我了解，对于小文件，data-uri 将对资源进行 UTF-8 编码，并本质上内联它——至少我们在 Webpack 包中是这样的。但在我们的 Vite 构建中，这些相对图像路径似乎没有被解析，data-uri 因此回落到 url()，我们得到 404 错误图像。

例如，在 UIkit 的代码中，旋转图像的相对路径被定义为 此处；它用在 select.uk-select 中。以及此处该路径被传递到 .svg-fill mixin (此处）。当我们使用 Vite 捆绑代码或运行本地开发服务器时，结果是：

background-image: url(../../images/backgrounds/form-select.svg);

当然，不会加载，因为“images”目录是相对于 form.less 文件的。在 Webpack 中，输出符合预期：

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23001c30' d='M12 1 9 6h6zM12 13 9 8h6z'/%3E%3C/svg%3E");

对于此类问题，我通常会包含 HTML/CSS/JS 片段；不过，我认为SO不支持Vite。因此，我添加了一个小型 Stackblitz 来最低限度地演示该问题： https: //stackblitz.com/edit/vite-esqmqc?file=main.js 请参阅 main.js、style.less，并注意有一个控制台中出现 404 错误，抱怨上述 form-select.svg 文件。

如果问题不清楚，如何让 Vite 解析与 node_modules 中的依赖项相关的图像？

提前致谢。

Answer 1

解决方法是将 resolve.alias 配置为指向 ../../images 到 uikit/src/images （解析为 node_modules/ 下的 uikit 包） 。这告诉 Vite 如何解决 问题相对图像路径。

resolve.alias 配置作为 条目。每个条目都可以有一个自定义解析器，可以用于仅替换来自 UIKit 的导入。但是，它要求 uikit.theme.less 的导入位于其自己的文件中，以便自定义解析器可以正确识别导入器，从而确定何时替换导入。

1. 将 uikit.theme.less 的导入放入其自己的文件中，然后从 main.js 导入（而不是从 style.less）：

// style.less
// @import './node_modules/uikit/src/less/uikit.theme.less'; ❌ move to own file

// my-uikit.less
@import './node_modules/uikit/src/less/uikit.theme.less';

// main.js
import './style.less';
import './my-uikit.less';

2. 使用以下配置创建 vite.config.js：

// vite.config.js
import { defineConfig } from 'vite';
import { fileURLToPath } from 'url';
import { basename } from 'path';

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '../../images',
        replacement: '',
        customResolver(updatedId, importer, resolveOptions) {
          // don't replace if importer is not our my-uikit.less
          if (basename(importer) !== 'my-uikit.less') {
            return '../../images';
          }

          return fileURLToPath(
            new URL(
              './node_modules/uikit/src/images' + updatedId,
              import.meta.url
            )
          );
        },
      },
    ],
  },
})

演示