1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[3445],{1253:function(e,n,a){a.r(n),a.d(n,{default:function(){return y}});var s=a(8453),t=a(6540);function o(e){const n=Object.assign({p:"p",span:"span",h2:"h2",a:"a"},(0,s.RP)(),e.components),{Image:a}=n;return a||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Image",!0),t.createElement(t.Fragment,null,t.createElement("div",{"data-excerpt":!0},t.createElement(n.p,null,"Linking web fonts in SASS when using Webpack might not work as expected. The most common problem is incorrect URL resolving if a font is linked with ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">url()</code>'}}),". This post covers this and the following traps on your way to nice fonts on your webpage.")),"\n",t.createElement("div",{class:"small",markdown:"1"},t.createElement(a,{caption:"Image source: https://processtypefoundry.com/blog/2011/02/five-new-webfonts/"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 585px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/8b7fb31084ad1663709e418f8b101db6/78a22/thumb.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 37%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsTAAALEwEAmpwYAAABfElEQVR42h1QSUsCcRSfT2Z+BU1BCOozBBUdvFSIHtRwOXh2HA1BsTFFm5x0NhXc993cxRnXk8d++A6PP++3vf8jMjzPptO/6XS315dleb1eL5fLw2HfbDYHg0Gn01mtVuPxuF6vFwqFyWQCFJPFYjGbzYiXt1fbu93hcvsCH9vtFjww9vt9q9XKZrMsy8LC4XCYTCaDwRCPx6GBI9B2u02orlQ6vf7m9u7+4XG3241GI4gVRcnn87FYLBAINBoN8CqVSrlcxl6KLG82G8TM53MiyXz/pFKfNM0JIpTggd3v94FNp1PkwBETSZJEUcQQ0N+ler0eEf2KZnjO56c4QUJmt9vFVviSIAjJZJLn+VKphEzsn8vlhsMhHGu1WrFYRCc0Wq3mWqdWqx+ennGMarUKMS4HNkVRXq+X47hEImE0Gj0eD0wjkQhJkna7naZpwuV0ms0Wq9VG+vy4k3Kp4/GIN/rpdDqfz8Fg0GKxuN1u7MUwDGShUCgcDv8DgxVCPJRL8ccAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="thumb"\n title=""\n src="/static/8b7fb31084ad1663709e418f8b101db6/78a22/thumb.png"\n srcset="/static/8b7fb31084ad1663709e418f8b101db6/e17e5/thumb.png 400w,\n/static/8b7fb31084ad1663709e418f8b101db6/78a22/thumb.png 585w"\n sizes="(max-width: 585px) 100vw, 585px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}))),"\n",t.createElement(n.h2,{id:"load-fonts",style:{position:"relative"}},t.createElement(n.a,{href:"#load-fonts","aria-label":"load fonts permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Load fonts"),"\n",t.createElement(n.p,null,"Instruct your webpack how to load font with ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">file-loader</code>'}}),":"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">{</span>\n <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\.(ttf|eot|woff|woff2|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">
1use</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'[name].[ext]\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">outputPath</span><span class="token operator">:</span> <span class="token string">\'fonts/\'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>'}}),"\n",t.createElement(n.p,null,"More info about loading fonts options on ",t.createElement(n.a,{href:"https://survivejs.com/webpack/loading/fonts/"},"SurviveJs project"),"."),"\n",t.createElement(n.h2,{id:"resolve-urls",style:{position:"relative"}},t.createElement(n.a,{href:"#resolve-urls","aria-label":"resolve urls permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Resolve URLs"),"\n",t.createElement(n.p,null,"If you use SASS, you must face a problem of resolving URLs. Let's say your Webpack configuration for processing SASS files is like the following."),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">{</span>\n <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\.scss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">loaders</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token string">\'style-loader\'</span><span class="token punctuation">,</span>\n <span class="token string">\'css-loader\'</span><span class="token punctuation">,</span>\n <span class="token string">\'sass-loader\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>'}}),"\n",t.createElement(n.p,null,"Everything looks normal but you still get the following error for every single SASS file."),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash">ERROR <span class="token keyword">in</span> ./src/styles.scss <span class="token punctuation">(</span>./node_modules/css-loader/dist/cjs.js??ref--5-1<span class="token operator">!</span>./node_modules/resolve-url-loader<span class="token operator">!</span>./node_modules/sass-loader/dist/cjs.js??ref--5-3<span class="token operator">!</span>./src/styles.scss<span class="token punctuation">)</span>
1\nModule not found: Error: Can<span class="token string">\'t resolve \'</span>./open-sans-v10-latin-regular.woff<span class="token string">\' in \'</span>/Users/varya/WebDev/my-pet-project\'\n @ ./src/styles.scss <span class="token punctuation">(</span>./node_modules/css-loader/dist/cjs.js??ref--5-1<span class="token operator">!</span>./node_modules/resolve-url-loader<span class="token operator">!</span>./node_modules/sass-loader/dist/cjs.js??ref--5-3<span class="token operator">!</span>./src/styles.scss<span class="token punctuation">)</span> <span class="token number">19</span>:42-87</code></pre></div>'}}),"\n",t.createElement(n.p,null,"In this case, you need to add ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">resolve-url-loader</code>'}})," because SASS itself does not do url rewriting."),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">{</span>\n <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\.scss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">loaders</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token string">\'style-loader\'</span><span class="token punctuation">,</span>\n <span class="token string">\'css-loader\'</span><span class="token punctuation">,</span>\n <span class="token string">\'resolve-url-loader\'</span><span class="token punctuation">,</span> <span class="token comment">// add this before sass-loader</span>\n <span class="token string">\'sass-loader\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>'}}),"\n",t.createElement(n.p,null,"For more information, you can check ",t.createElement(n.a,{href:"https://webpack.js.org/loaders/sass-loader/#problems-with-url"},"Problems with url(...)")," in Webpack official documentation."),"\n",t.createElement(n.h2,{id:"svg-i-caught-you",style:{position:"relative"}},t.createElement(n.a,{href:"#svg-i-caught-you","aria-label":"svg i caught you permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"SVG, I caught you!"),"\n",t.createElement(n.p,null,"Note that the above configuration also applies to SVG files. You may have other SVG files that you do not want to process as fonts. In this case, do not forget to use ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">include</code>'}})," and ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">exclude</code>'}})," options."),"\n",t.createElement(n.p,null,"For the fonts, include only the files from a directory where you keep fonts:"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">{</span>\n <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\.(ttf|eot|woff|woff2|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">
1use</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">include</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">\'./src/webfonts\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'[name].[ext]\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">outputPath</span><span class="token operator">:</span> <span class="token string">\'fonts/\'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>'}}),"\n",t.createElement(n.p,null,"For SVG illustrations, exclude the font folder:"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">{</span>\n <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\.svg$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">exclude</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">\'./src/webfonts\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'@svgr/webpack\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>'}}),"\n",t.createElement(n.h2,{id:"production-resolve-urls",style:{position:"relative"}},t.createElement(n.a,{href:"#production-resolve-urls","aria-label":"production resolve urls permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Production: resolve URLs"),"\n",t.createElement(n.p,null,"Now everything works in the development environment, but with production webpack configuration you must get the familiar error for every single SASS file."),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash">ERROR <span class="token keyword">in</span> ./src/styles.scss <span class="token punctuation">(</span>./node_modules/css-loader/dist/cjs.js??ref--5-1<span class="token operator">!</span>./node_modules/resolve-url-loader<span class="token operator">!</span>./node_modules/sass-loader/dist/cjs.js??ref--5-3<span class="token operator">!</span>./src/styles.scss<span class="token punctuation">)</span>
1\nModule not found: Error: Can<span class="token string">\'t resolve \'</span>./open-sans-v10-latin-regular.woff<span class="token string">\' in \'</span>/Users/varya/WebDev/my-pet-project\'\n @ ./src/styles.scss <span class="token punctuation">(</span>./node_modules/css-loader/dist/cjs.js??ref--5-1<span class="token operator">!</span>./node_modules/resolve-url-loader<span class="token operator">!</span>./node_modules/sass-loader/dist/cjs.js??ref--5-3<span class="token operator">!</span>./src/styles.scss<span class="token punctuation">)</span> <span class="token number">19</span>:42-87</code></pre></div>'}}),"\n",t.createElement(n.p,null,"For production mode, you need to add ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<code class=\"language-text\">devtool: 'source-map'</code>"}})," to the root of your Webpack configuration. This is for the ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">resolve-url-loader</code>'}})," to work correctly also when building for production."),"\n",t.createElement(n.h2,{id:"turn-off-es-modules",style:{position:"relative"}},t.createElement(n.a,{href:"#turn-off-es-modules","aria-label":"turn off es modules permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Turn off ES modules"),"\n",t.createElement(n.p,null,"By default, file-loader generates JS modules that use the ES modules syntax. But in the fonts case it would give you ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">src: url([object Module]);</code>'}}),". To avoid it, use ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">esModule: false,</code>'}})),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">{</span>\n <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\.(ttf|eot|woff|woff2|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">include</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">\'./src/webfonts\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'[name].[ext]\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">outputPath</span><span class="token operator">:</span> <span class="token string">\'fonts/\'</span><span class="token punctuation">,</span>
1\n <span class="token literal-property property">esModule</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>'}}),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 426px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/0b17f517a2cea74888704d2e0dcd25fe/531e1/enjoy.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 63.5%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB9ElEQVR42o1Sy8vpURT9/Tf+AjFGSogBiqKE0v0m8ggD8shAyWNAKRSlbgrlMVbEQIw88hqZiIGSvF/f4pRP353cPTits/de+5y99qbu9/vlcnk8Htvtdr/fP/7PjsfjZrOh7i+LxWI2my2VSsFLwtfrlRT9ZfDjDAaDgUCAArJYLHq9HsBoNI7HY4Db7UZSUZdkkzeIHx6hUDgcDqlarSaTyeDChcvl7nY7Qmu1WoVCgRSCETIpVK/XNRoNAJXNZn0+32KxkEqliUQCGWgegb8vgwqz2QzX9XoN/2q1Avb7/el0+kmeTqd8Pp/D4TSbTbwgEokkEonL5XI4HJVKBe3gkV6vh46i0ajT6QRHp9PN5/MnGTp5vd54PJ7P5zOZDJiI4S8Gg8FkMkFCtKdWq91ut9lsRsLhcKhWq0RLSqvVejyefr8PwOPxyuWyQqEQi8UqlQq/QGmlUkmn0yEqg8HAUIrFIqqjuycZtFAoFA6HUW80GkEShGk0WqlUWi6XwGgbisjlcoFAgOhkMoFgRH/qU09g5H39+WKz2afT6T2zXC7HZDKTySTw5/ApsgxIIusBqaxWK34LTPjtdhsdoeFOp0PIbz71LkMesdvt0KzRaACfz2ecwCwWKxKJkK9+btsPmQQwz8Fg8JkBf7fbxSb/S/4GBOVoNaU2gCkAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="enjoy"\n title=""\n src="/static/0b17f517a2cea74888704d2e0dcd25fe/531e1/enjoy.png"\n srcset="/static/0b17f517a2cea74888704d2e0dcd25fe/e17e5/enjoy.png 400w,\n/static/0b17f517a2cea74888704d2e0dcd25fe/531e1/enjoy.png 426w"\n sizes="(max-width: 426px) 100vw, 426px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}))}var p=function(e={}){const{wrapper:n}=Object.assign({},(0,s.RP)(),e.components);return n?t.createElement(n,e,t.createElement(o,e)):o(e)};var l=a(5556),r=a.n(l),c=a(3433),i=a(9868),u=a(7037),d=a(3928),g=a(4449);const k={Box:c.a,Button:i.$,Text:u.E,Heading:d.DZ,Paragraph:d.fz,PatternJourney:d.Rl,PureHtml:d.Qi,Section:d.wn,Hero:d.lq,Widget:d.x0,PatternJourney:d.Rl,WidgetContainer:d.uM,Workshop:d.cR,ProjectRoles:d.JV,DsAspects:d.nD,Link:d.N_,Image:d._V,ImageBlock:d.Dq,Map:d.T5,YandexImage:d.zX,Instagram:d.pd},m=e=>({children:n})=>t.createElement(d.DZ,{level:e},n),h={h1:m(1),h2:m(2),h3:m(3),h4:m(4),h5:m(5),h6:m(6),p:({children:e})=>t.createElement(d.fz,{standout:!0},e),a:d.N_,ul:d.Ul,ol:d.Ol,div:({"data-excerpt":e,children:n,...a})=>e?t.createElement(d.fz,{as:"div",lead:!0},n):t.createElement("div",a,n)};h.h1.propTypes={children:r().node};const f=({data:{mdx:e,site:{siteMetadata:{siteUrl:n}}},children:a,pageContext:{next:o,prev:p,fileSourceUrl:l}})=>{const{readingTime:r,slug:i,disqusIdentifier:u}=e.fields,{date:m,title:f,subTitle:y,cover:v,tumblr:b}=e.frontmatter,E=e.frontmatter.tags&&e.frontmatter.tags.split(","),w=i.startsWith("blog/");return e?t.createElement(d.PE,null,t.createElement(d.I0,{imageUrl:v&&v.childImageSharp.gatsbyImageData.images.fallback.src,tags:E,date:m,readingTime:w&&parseInt(r.minutes)>0?`${Math.round(r.minutes).toFixed(1)} min read`:null,title:f,subTitle:y}),t.createElement(d.G$,{data:e}),t.createElement(c.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},t.createElement(s.xA,{components:{...h,...k}},a),t.createElement(c.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},E&&E.length>0&&E.map(e=>t.createElement(d.vw,{key:e,name:e.trim(),slug:(0,g.fX)(e),margin:"xsmall"}))),w&&t.createElement(t.Fragment,null,t.createElement(d.WB,{flex:!1,prevSlug:p&&`/${p.fields.slug}`,nextSlug:o&&`/${o.fields.slug}`,prevTitle:p&&p.frontmatter.title,nextTitle:o&&o.frontmatter.title,pad:{vertical:"medium"}}),t.createElement(d.Sn,{link:l}),t.createElement(d.Hw,{slug:i,title:f,disqusIdentifier:u,tumblr:b,siteUrl:n})))):null};function y(e){return t.createElement(f,e,t.createElement(p,e))}},8453:function(e,n,a){a.d(n,{RP:function(){return o},xA:function(){return l}});var s=a(6540);const t=s.createContext({});function o(e){const n=s.useContext(t);return s.useMemo(()=>"function"==typeof e?e(n):{...n,...e},[n,e])}const p={};function l({components:e,children:n,disableParentContext:a}){let l;return l=a?"function"==typeof e?e({}):e||p:o(e),s.createElement(t.Provider,{value:l},n)}}}]); 2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-posts-webfonts-with-sass-and-webpack-index-md-37652173e7ecf57cf0f9.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.