时间戳

首页 > 解决方案 > webpack处理后svg文件中导入样式表的问题

svg - webpack处理后svg文件中导入样式表的问题

问题描述

根据https://www.w3.org/TR/SVG/styling.html#StylingWithCSS，为了将 svg 配置为使用外部样式表中定义的样式，您可以按如下方式导入它们：

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url(mystyles.css);
  </style>
  <rect .../>
</svg>

当文件以其原始格式存在时，这在 Chrome 中运行良好，无论是从 Web 服务器提供还是从本地文件系统读取，但是在使用 webpack 构建后，生成的应用程序的 svg 元素没有样式，因此显然找不到样式表.

我所做的所有搜索都发现了很多关于什么是或多或少的反向操作的信息——从 css 中引用 svg 文件（例如，将 svg 图像指定为元素的背景）。

有谁知道专门针对这种情况的 webpack 插件和/或配置？

标签： svgwebpackstylesheet

解决方案

推荐阅读