1

我们的项目中使用了以下 Webpack 加载器/插件 -</p>

  • CopyPlugin – 将所有资产复制到构建文件夹
  • 文件加载器 - 将文件上的 import/require() 解析为 url 并将文件发送到输出目录
  • Svg Sprite Loader – 从 svg 生成用于图标的 sprite

问题——</h3>

复制插件正在正确复制构建/图像中的所有资产。文件加载器尝试解析写在其中一个 less 文件中的这段代码——</p> 

.slider-minus {
  background: url(./images/svg/slider-minus.svg) no-repeat;
  width: 17px;
  height: 17px;
  object-fit: contain;
  border: 2px solid red;
}

这样做时，它会将 slider-minus.svg 文件发送到构建目录中。

然后，svg-sprite-loader 会使用此 slider-minus.svg，并在 svg 文件中添加一些不需要的代码，如下所示 -</p> 

export default {
  id: "slider-minus-usage",
  viewBox: "0 0 17 17",
  url: __webpack_public_path__ + "/Users/maysingh2/POC/src/images/svg/slider-minus.svg",
  toString: function () {
    return this.url;
  }
}

由于此不需要的代码，无法从生成的 css 文件中正确呈现图标。

.slider-minus {
  background: url(images/slider-minus.svg) no-repeat;
  width: 17px;
  height: 17px;
  object-fit: contain;
  border: 2px solid red;
}

有谁知道如何更正图标渲染。项目中的许多其他图标都会发生这种情况。这是这个问题 POC 的 github url - https://github.com/msinghal56/svg-poc

要运行的命令 -

npm install
npm run dev/npm start

如果您对此有解决方案，请告诉我。

4

0 回答 0