CINXE.COM

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"><link rel="manifest" href="/favicon/site.webmanifest"><title>The Snowpack Plugin Catalog</title><meta name="title" content="The Snowpack Plugin Catalog"><meta name="description" content="Snowpack plugins allow for configuration-minimal tooling integration."><meta property="og:type" content="website"><meta property="og:url" content="TODO"><meta property="og:title" content="The Snowpack Plugin Catalog"><meta property="og:description" content="Snowpack plugins allow for configuration-minimal tooling integration."><meta property="og:image" content="https://www.snowpack.dev/img/social-2.jpg"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="TODO"><meta property="twitter:title" content="The Snowpack Plugin Catalog"><meta property="twitter:description" content="Snowpack plugins allow for configuration-minimal tooling integration."><meta property="twitter:image" content="https://www.snowpack.dev/img/social-2.jpg"><link rel="stylesheet" href="/_astro/common-1ckxTT.css" type="text/css"><link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700;900&display=swap" rel="stylesheet"><style type="text/css"> .intro.astro-BJ6JmYve { margin-top: 1rem; margin-bottom: 1rem; line-height: 1.5; text-align: left; } .intro.astro-BJ6JmYve a.astro-BJ6JmYve { color: #2e5e82; } .subheading.astro-BJ6JmYve { margin-top: -2.5rem; margin-bottom: 0; color: #2e5e82; font-weight: 500; font-size: 1em; font-family: "Overpass", sans-serif; letter-spacing: -0.02em; text-align: left; } @media (min-width: 600px) { .subheading.astro-BJ6JmYve { font-size: 1.5em; } } .zero-heading.astro-BJ6JmYve { margin-top: 1.5rem; margin-bottom: 1.5rem; font-weight: 700; font-size: 1.4em; text-align: left; } @media (min-width: 600px) { .zero-heading.astro-BJ6JmYve { font-size: 1.5em; } }</style><link rel="stylesheet" href="/_astro/plugins/index-Z1woIEb.css" type="text/css"><style type="text/css">astro-root, astro-fragment { display: contents; }</style></head><body><nav class="nav astro-ahFEmudE"><button id="toc-drawer-button" class="mobile-open astro-ahFEmudE" type="button" aria-expanded="false" aria-controls="nav-primary"><svg focusable="false" class="hamburger astro-ahFEmudE" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><title>Toggle mobile menu</title><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" class="astro-ahFEmudE"></path></svg></button><a class="logo astro-ahFEmudE" href="/"><svg class="logo-icon astro-ahFEmudE" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero" class="astro-ahFEmudE"><path d="M635.92,462.7 L347.92,14.7 C342.03,5.54 331.89,0 321,0 C310.11,0 299.97,5.54 294.08,14.7 L6.08,462.7 C-0.250773249,472.547007 -0.699487627,485.064987 4.91,495.34 C10.522069,505.612419 21.2945349,512 33,512 L609,512 C620.71,512 631.48,505.61 637.09,495.33 C642.699457,485.058495 642.250708,472.543372 635.92,462.7 Z M321,91.18 L406.39,224 L321,224 L257,288 L218.94,249.94 L321,91.18 Z" id="Shape" class="astro-ahFEmudE"></path></g></svg><span class="logo-type astro-ahFEmudE">Snowpack</span></a><div class="search astro-ahFEmudE"><input type="text" name="search" placeholder="Search documentation..." class="search-input astro-ahFEmudE" id="search-form-input"><span class="search-hint astro-ahFEmudE"><span class="sr-only astro-ahFEmudE">Press </span><kbd class="font-sans astro-ahFEmudE"><abbr title="Command" style="text-decoration: none;" class="astro-ahFEmudE">⌘</abbr></kbd><span class="sr-only astro-ahFEmudE"> and </span><kbd class="font-sans astro-ahFEmudE">K</kbd><span class="sr-only astro-ahFEmudE"> to search</span></span></div><a href="https://github.com/FredKSchott/snowpack/releases" target="_blank" class="link version astro-ahFEmudE">v3.8.8</a><a href="https://github.com/FredKSchott/snowpack" target="_blank" class="link link__desktop astro-ahFEmudE"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="social astro-ahFEmudE" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" class="astro-ahFEmudE"></path></svg></a></nav><script> function handleMobileNav(evt) { evt.preventDefault(); /*If hidden-mobile class is enabled that means we are on desktop do overflow normal but we if we are at mobile fixed body position, so that its not scrollable(which currently causing bug) and navbar handling its owns scroll. Case to consider there are chance use can open navbar using toggle button and user when click on any link body postion should be unset */ document.body.classList.toggle('is-nav-open'); const isOpen = document.body.classList.contains('is-nav-open'); if (isOpen) { evt.target.setAttribute('aria-expanded', 'true'); } else { evt.target.setAttribute('aria-expanded', 'false'); } } const mobileNavBtn = document.getElementById('toc-drawer-button'); mobileNavBtn.addEventListener('click', handleMobileNav); mobileNavBtn.addEventListener('touchend', handleMobileNav); if (window.location.pathname.startsWith('/posts')) { mobileNavBtn.style.display = 'none'; } const searchFormInputEl = document.getElementById('search-form-input'); searchFormInputEl.addEventListener('keyup', () => { const gridTocEl = document.querySelector('#nav-primary'); if (searchFormInputEl.value) { gridTocEl.classList.add('is-mobile-hidden'); } else { gridTocEl.classList.remove('is-mobile-hidden'); } }); document.onkeydown = function (e) { if ((e.ctrlKey || e.metaKey) && e.which == 75) { e.preventDefault(); searchFormInputEl.focus(); } }; </script><script type="module" src="/_astro/src/components/docsearch.js"></script><doc-search api-key="562139304880b94536fc53f5d65c5c19" selector="#search-form-input" class="astro-ahFEmudE"></doc-search><div class="wrapper astro-huAZzsR1"><section class="layout astro-huAZzsR1"><aside id="nav-primary" class="layout-nav astro-huAZzsR1"><nav class="nav astro-hk9uDi21"><ol class="contents astro-hk9uDi21"><li class="section astro-hk9uDi21"><span class="header astro-hk9uDi21">Concepts</span><ol class="items astro-hk9uDi21"><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/concepts/how-snowpack-works">How Snowpack Works</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/concepts/dev-server">The Dev Server</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/concepts/build-pipeline">The Build Pipeline</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/concepts/hot-module-replacement">Fast Refresh & HMR</a></li></ol></li><li class="section astro-hk9uDi21"><span class="header astro-hk9uDi21">Getting Started</span><ol class="items astro-hk9uDi21"><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/quick-start">Quick Start</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/getting-started">Getting Started</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/react">React</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/svelte">Svelte</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/vue">Vue</a></li></ol></li><li class="section astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/guides"><span class="header astro-hk9uDi21">Guides</span></a></li><li class="section astro-hk9uDi21"><span class="header astro-hk9uDi21">Reference</span><ol class="items astro-hk9uDi21"><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/configuration">snowpack.config.js</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/cli-command-line-interface">Command Line API</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/javascript-interface">JavaScript API</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/plugins">Plugin API</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/environment-variables">Environment Variables</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/hot-module-replacement">HMR API</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/supported-files">Supported Files</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/common-error-details">Common Errors</a></li></ol></li><li class="section astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/plugins"><span class="header astro-hk9uDi21">Plugin Catalog</span></a></li><li class="section astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/news"><span class="header astro-hk9uDi21">Community & News</span></a></li></ol></nav></aside><article class="layout-main astro-huAZzsR1"><h2 class="content-title astro-BJ6JmYve">The Snowpack Plugin Catalog</h2><h3 class="pluginPage-subheading astro-BJ6JmYve"> Customize Snowpack with optimized build plugins. </h3><p class="pluginPage-intro astro-BJ6JmYve"> To learn more about our plugin system, check out the <a href="/reference/plugins" class="astro-BJ6JmYve">Plugin API.</a><br class="astro-BJ6JmYve">Can't find what you need? <a href="/reference/plugins" class="astro-BJ6JmYve">Creating your own plugin is easy!</a></p><div style="margin-top:4rem;" class="astro-BJ6JmYve"></div><astro-root uid="1r8N1r"><form name="myform" id="myform" class="_Form_1axyx_70" action="https://www.npmjs.com/search" method="GET"><input type="search" name="q" placeholder="search Sass, sitemaps, image optimization..." class="_Input_1axyx_92"><button type="submit" class="_Submit_1axyx_111">Search</button></form><div class="_Count_1axyx_55" id="total-result-count"></div><section id="search-results" class="_Results_1axyx_115"><div id="loading-message" class="_Loading_1axyx_87">Loading...</div></section></astro-root> <script type="module"> import setup from '/_astro_frontend/hydrate/load.js'; setup("1r8N1r", {}, async () => { const [{ default: Component }, { default: hydrate }] = await Promise.all([import("/_astro/src/components/PluginSearchPage.js"), import("/_snowpack/pkg/@astrojs.renderer-preact.client.v0.2.1.js")]); return (el, children) => hydrate(el)(Component, {}, children); }); </script></article></section></div><script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-9"></script><script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-130280175-9', { page_path: location.pathname === '/' ? (location.pathname + location.hash) : (location.pathname) }); </script></body></html>