Webpack 从我的样式表中的内联 SVG 中去除标签，我不知道为什么

Question

我将 Gatsby 与 Tailwind 一起使用 CSS 并且构建步骤从我的样式表中的内联 SVG 中删除了动画。

这是我的 /styles/global.css 内嵌 SVG 动画：

@tailwind base;
@tailwind components;
@tailwind utilities;

.animate-bg-blue-edges {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1000' height='560' preserveAspectRatio='none' viewBox='0 0 1000 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1068%26quot%3b)' fill='none'%3e%3cpath d='M33.92140997279915 576.3200414218256L135.6146172499762 474.62683414464857 33.92140997279912 372.9336268674715-67.77179730437794 474.62683414464857z' fill='rgba(0%2c 113%2c 217%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M684.992%2c535.357C731.366%2c534.81%2c771.376%2c503.967%2c792.577%2c462.72C812.066%2c424.804%2c805.582%2c380.198%2c783.484%2c343.741C762.268%2c308.74%2c725.908%2c284.205%2c684.992%2c285.23C645.618%2c286.216%2c615.5%2c315.03%2c594.69%2c348.469C572.255%2c384.519%2c554.45%2c427.076%2c572.923%2c465.308C593.465%2c507.821%2c637.779%2c535.913%2c684.992%2c535.357' fill='rgba(0%2c 113%2c 217%2c 0.06)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M655.352%2c216.654C699.12%2c214.919%2c738.519%2c192.137%2c761.091%2c154.599C784.424%2c115.794%2c790.735%2c67.665%2c768.736%2c28.088C746.161%2c-12.526%2c701.819%2c-35.515%2c655.352%2c-35.631C608.678%2c-35.747%2c565.265%2c-12.342%2c540.988%2c27.522C515.668%2c69.099%2c508.831%2c121.946%2c534.02%2c163.602C558.5%2c204.086%2c608.079%2c218.528%2c655.352%2c216.654' fill='rgba(0%2c 113%2c 217%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M746.0565729747942 297.6892313956009L764.2532381400358 204.07550454249028 670.6395112869252 185.8788393772487 652.4428461216836 279.49256623035933z' fill='rgba(0%2c 113%2c 217%2c 0.08)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M720.044%2c80.366C743.919%2c81.1%2c770.685%2c79.529%2c783.525%2c59.387C797.048%2c38.174%2c791.048%2c10.788%2c778.175%2c-10.826C765.639%2c-31.875%2c744.533%2c-46.515%2c720.044%2c-47.202C694.315%2c-47.924%2c668.46%2c-36.762%2c655.976%2c-14.253C643.796%2c7.706%2c648.9%2c34.889%2c662.979%2c55.682C675.433%2c74.075%2c697.841%2c79.684%2c720.044%2c80.366' fill='rgba(0%2c 113%2c 217%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M239.2%2c559.944C274.52%2c560.667%2c309.214%2c545.166%2c327.134%2c514.722C345.295%2c483.868%2c342.217%2c445.812%2c324.789%2c414.538C306.846%2c382.339%2c276.061%2c357.057%2c239.2%2c356.923C202.141%2c356.789%2c169.903%2c381.179%2c152.528%2c413.913C136.205%2c444.665%2c139.518%2c481.306%2c157.287%2c511.245C174.664%2c540.523%2c205.161%2c559.247%2c239.2%2c559.944' fill='rgba(0%2c 113%2c 217%2c 0.04)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M870.8848484464366 393.0320111371974L769.7274962578927 456.24214024011644 934.0949775493557 494.18936332574134z' fill='rgba(0%2c 113%2c 217%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1068'%3e%3crect width='1000' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}

background-image 本质上是这样的，注意最后的 <style/> 标签：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="1000" height="560" preserveAspectRatio="none" viewBox="0 0 1000 560">
    <g mask="url(&quot;#SvgjsMask1068&quot;)" fill="none">
        <path d="M33.92140997279915 576.3200414218256L135.6146172499762 474.62683414464857 33.92140997279912 372.9336268674715-67.77179730437794 474.62683414464857z" fill="rgba(0, 113, 217, 0.05)" class="triangle-float3"/>
        <path d="M684.992,535.357C731.366,534.81,771.376,503.967,792.577,462.72C812.066,424.804,805.582,380.198,783.484,343.741C762.268,308.74,725.908,284.205,684.992,285.23C645.618,286.216,615.5,315.03,594.69,348.469C572.255,384.519,554.45,427.076,572.923,465.308C593.465,507.821,637.779,535.913,684.992,535.357" fill="rgba(0, 113, 217, 0.06)" class="triangle-float3"/>
        <path d="M655.352,216.654C699.12,214.919,738.519,192.137,761.091,154.599C784.424,115.794,790.735,67.665,768.736,28.088C746.161,-12.526,701.819,-35.515,655.352,-35.631C608.678,-35.747,565.265,-12.342,540.988,27.522C515.668,69.099,508.831,121.946,534.02,163.602C558.5,204.086,608.079,218.528,655.352,216.654" fill="rgba(0, 113, 217, 0.05)" class="triangle-float2"/>
        <path d="M746.0565729747942 297.6892313956009L764.2532381400358 204.07550454249028 670.6395112869252 185.8788393772487 652.4428461216836 279.49256623035933z" fill="rgba(0, 113, 217, 0.08)" class="triangle-float3"/>
        <path d="M720.044,80.366C743.919,81.1,770.685,79.529,783.525,59.387C797.048,38.174,791.048,10.788,778.175,-10.826C765.639,-31.875,744.533,-46.515,720.044,-47.202C694.315,-47.924,668.46,-36.762,655.976,-14.253C643.796,7.706,648.9,34.889,662.979,55.682C675.433,74.075,697.841,79.684,720.044,80.366" fill="rgba(0, 113, 217, 0.05)" class="triangle-float1"/>
        <path d="M239.2,559.944C274.52,560.667,309.214,545.166,327.134,514.722C345.295,483.868,342.217,445.812,324.789,414.538C306.846,382.339,276.061,357.057,239.2,356.923C202.141,356.789,169.903,381.179,152.528,413.913C136.205,444.665,139.518,481.306,157.287,511.245C174.664,540.523,205.161,559.247,239.2,559.944" fill="rgba(0, 113, 217, 0.04)" class="triangle-float3"/>
        <path d="M870.8848484464366 393.0320111371974L769.7274962578927 456.24214024011644 934.0949775493557 494.18936332574134z" fill="rgba(0, 113, 217, 0.05)" class="triangle-float3"/>
    </g>
    <defs>
        <mask id="SvgjsMask1068">
            <rect width="1000" height="560" fill="white"/>
        </mask>
        <style> @keyframes float1 { 0%{transform: translate(0, 0)} 50%{transform: translate(-10px, 0)} 100%{transform: translate(0, 0)} } .triangle-float1 { animation: float1 5s infinite; } @keyframes float2 { 0%{transform: translate(0, 0)} 50%{transform: translate(-5px, -5px)} 100%{transform: translate(0, 0)} } .triangle-float2 { animation: float2 4s infinite; } @keyframes float3 { 0%{transform: translate(0, 0)} 50%{transform: translate(0, -10px)} 100%{transform: translate(0, 0)} } .triangle-float3 { animation: float3 6s infinite; } </style>
    </defs>
</svg>

我的tailwind.config.js相当简单：

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'media',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

原样postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

我在 gatsby-config.js:

中启用了一堆插件

module.exports = {
  ...
  plugins: [
    "gatsby-plugin-postcss",
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-mdx",
  ]
}

当我执行 npm run build / gatsby build 时，来自 <style/> 标签的动画丢失。

构建时 .animate-bg-blue-edges 选择器的输出是

.animate-bg-blue-edges {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='560' preserveAspectRatio='none' viewBox='0 0 1000 560'%3E%3Cg fill='none' mask='url(%26quot;%23SvgjsMask1068%26quot;)'%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='m33.921 576.32 101.694-101.693L33.92 372.934-67.772 474.627z' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.06)' d='M684.992 535.357c46.374-.547 86.384-31.39 107.585-72.637 19.489-37.916 13.005-82.522-9.093-118.979-21.216-35.001-57.576-59.536-98.492-58.511-39.374.986-69.492 29.8-90.302 63.239-22.435 36.05-40.24 78.607-21.767 116.839 20.542 42.513 64.856 70.605 112.069 70.049' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='M655.352 216.654c43.768-1.735 83.167-24.517 105.739-62.055 23.333-38.805 29.644-86.934 7.645-126.511-22.575-40.614-66.917-63.603-113.384-63.719-46.674-.116-90.087 23.289-114.364 63.153-25.32 41.577-32.157 94.424-6.968 136.08 24.48 40.484 74.059 54.926 121.332 53.052' style='animation:float2 4s infinite'/%3E%3Cpath fill='rgba(0, 113, 217, 0.08)' d='m746.057 297.69 18.196-93.614-93.613-18.197-18.197 93.614z' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='M720.044 80.366c23.875.734 50.641-.837 63.481-20.979 13.523-21.213 7.523-48.599-5.35-70.213-12.536-21.049-33.642-35.689-58.131-36.376-25.729-.722-51.584 10.44-64.068 32.949-12.18 21.959-7.076 49.142 7.003 69.935 12.454 18.393 34.862 24.002 57.065 24.684' style='animation:float1 5s infinite'/%3E%3Cpath fill='rgba(0, 113, 217, 0.04)' d='M239.2 559.944c35.32.723 70.014-14.778 87.934-45.222 18.161-30.854 15.083-68.91-2.345-100.184-17.943-32.199-48.728-57.481-85.589-57.615-37.059-.134-69.297 24.256-86.672 56.99-16.323 30.752-13.01 67.393 4.759 97.332 17.377 29.278 47.874 48.002 81.913 48.699' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='m870.885 393.032-101.158 63.21 164.368 37.947z' class='prefix__triangle-float3'/%3E%3C/g%3E%3Cdefs%3E%3Cmask id='prefix__SvgjsMask1068'%3E%3Crect width='1000' height='560' fill='%23fff'/%3E%3C/mask%3E%3C/defs%3E%3C/svg%3E")'%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='m33.921 576.32 101.694-101.693L33.92 372.934-67.772 474.627z' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.06)' d='M684.992 535.357c46.374-.547 86.384-31.39 107.585-72.637 19.489-37.916 13.005-82.522-9.093-118.979-21.216-35.001-57.576-59.536-98.492-58.511-39.374.986-69.492 29.8-90.302 63.239-22.435 36.05-40.24 78.607-21.767 116.839 20.542 42.513 64.856 70.605 112.069 70.049' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='M655.352 216.654c43.768-1.735 83.167-24.517 105.739-62.055 23.333-38.805 29.644-86.934 7.645-126.511-22.575-40.614-66.917-63.603-113.384-63.719-46.674-.116-90.087 23.289-114.364 63.153-25.32 41.577-32.157 94.424-6.968 136.08 24.48 40.484 74.059 54.926 121.332 53.052' style='animation:float2 4s infinite'/%3E%3Cpath fill='rgba(0, 113, 217, 0.08)' d='m746.057 297.69 18.196-93.614-93.613-18.197-18.197 93.614z' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='M720.044 80.366c23.875.734 50.641-.837 63.481-20.979 13.523-21.213 7.523-48.599-5.35-70.213-12.536-21.049-33.642-35.689-58.131-36.376-25.729-.722-51.584 10.44-64.068 32.949-12.18 21.959-7.076 49.142 7.003 69.935 12.454 18.393 34.862 24.002 57.065 24.684' style='animation:float1 5s infinite'/%3E%3Cpath fill='rgba(0, 113, 217, 0.04)' d='M239.2 559.944c35.32.723 70.014-14.778 87.934-45.222 18.161-30.854 15.083-68.91-2.345-100.184-17.943-32.199-48.728-57.481-85.589-57.615-37.059-.134-69.297 24.256-86.672 56.99-16.323 30.752-13.01 67.393 4.759 97.332 17.377 29.278 47.874 48.002 81.913 48.699' class='prefix__triangle-float3'/%3E%3Cpath fill='rgba(0, 113, 217, 0.05)' d='m870.885 393.032-101.158 63.21 164.368 37.947z' class='prefix__triangle-float3'/%3E%3C/g%3E%3Cdefs%3E%3Cmask id='prefix__SvgjsMask1068'%3E%3Crect width='1000' height='560' fill='%23fff'/%3E%3C/mask%3E%3C/defs%3E%3C/svg%3E);
  background-size: cover;
}

对应的 SVG 如下：

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="560" preserveAspectRatio="none" viewBox="0 0 1000 560">
    <g fill="none" mask="url(&quot;#SvgjsMask1068&quot;)">
        <path fill="rgba(0, 113, 217, 0.05)" d="m33.921 576.32 101.694-101.693L33.92 372.934-67.772 474.627z" class="prefix__triangle-float3"/>
        <path fill="rgba(0, 113, 217, 0.06)" d="M684.992 535.357c46.374-.547 86.384-31.39 107.585-72.637 19.489-37.916 13.005-82.522-9.093-118.979-21.216-35.001-57.576-59.536-98.492-58.511-39.374.986-69.492 29.8-90.302 63.239-22.435 36.05-40.24 78.607-21.767 116.839 20.542 42.513 64.856 70.605 112.069 70.049" class="prefix__triangle-float3"/>
        <path fill="rgba(0, 113, 217, 0.05)" d="M655.352 216.654c43.768-1.735 83.167-24.517 105.739-62.055 23.333-38.805 29.644-86.934 7.645-126.511-22.575-40.614-66.917-63.603-113.384-63.719-46.674-.116-90.087 23.289-114.364 63.153-25.32 41.577-32.157 94.424-6.968 136.08 24.48 40.484 74.059 54.926 121.332 53.052" style="animation:float2 4s infinite"/>
        <path fill="rgba(0, 113, 217, 0.08)" d="m746.057 297.69 18.196-93.614-93.613-18.197-18.197 93.614z" class="prefix__triangle-float3"/>
        <path fill="rgba(0, 113, 217, 0.05)" d="M720.044 80.366c23.875.734 50.641-.837 63.481-20.979 13.523-21.213 7.523-48.599-5.35-70.213-12.536-21.049-33.642-35.689-58.131-36.376-25.729-.722-51.584 10.44-64.068 32.949-12.18 21.959-7.076 49.142 7.003 69.935 12.454 18.393 34.862 24.002 57.065 24.684" style="animation:float1 5s infinite"/>
        <path fill="rgba(0, 113, 217, 0.04)" d="M239.2 559.944c35.32.723 70.014-14.778 87.934-45.222 18.161-30.854 15.083-68.91-2.345-100.184-17.943-32.199-48.728-57.481-85.589-57.615-37.059-.134-69.297 24.256-86.672 56.99-16.323 30.752-13.01 67.393 4.759 97.332 17.377 29.278 47.874 48.002 81.913 48.699" class="prefix__triangle-float3"/>
        <path fill="rgba(0, 113, 217, 0.05)" d="m870.885 393.032-101.158 63.21 164.368 37.947z" class="prefix__triangle-float3"/>
    </g>
    <defs>
        <mask id="prefix__SvgjsMask1068">
            <rect width="1000" height="560" fill="#fff"/>
        </mask>
    </defs>
</svg>

现在缺少 <style/> 标签。

它是如何被删除的？
是 Tailwind，还是 PostCSS，还是 Gatsby？
如何防止这种情况发生？

从上面可以看出，我对 Gatsby、PostCSS 和 Tailwind 还很陌生。

Answer 1

使用 svgr 插件。对于盖茨比，它是 https://www.gatsbyjs.com/plugins/gatsby-plugin-svgr/

打开 svgo。尝试不同的 svgo 插件配置：https://nicedoc.io/svg/svgo

通过禁用 inlineStyles 您的问题可能会得到解决

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-svgr',
      options: {
        svgo: true,
        svgoConfig: {
          plugins: [
            { prefixIds: true },
            { inlineStyles: false }
          ],
        },
      },
    },
  ],
}

Webpack 从我的样式表中的内联 SVG 中去除标签，我不知道为什么

Webpack strips tags out of inline SVGs in my stylesheets and I don't know why

javascript

reactjs

webpack

postcss

tailwind-css