Hello Everyone,
I’m looking for a little help here, Hugo is inlining all my CSS even though I am using external SCSS stylesheets. I’ve read the documentation and can’t find a setting to disable this feature.
The amount of CSS being output on the site is ridiculous and I’m getting no caching benefit from it.
Can someone point me in the right direction for a hugo setting that will allow me to disable it from inlining all my CSS on all my pages and allow external stylesheets?
Thank you
Please post the template that is inserting the CSS, or better yet, post a link to your project repository.
<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}" translate="no" class="notranslate">
<head>
<meta name="google" content="notranslate" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://maps.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" rel="stylesheet">
{{ if .Page.Params.robots }}
<meta name="robots" content="{{.Page.Params.robots }}" />
{{ end }}
{{ if .Page.Params.hreflang_alternate_url }}
{{ if (eq .Site.Language.Lang "en") }}
<link rel="alternate" hreflang="en" href="{{ .Permalink }}" />
<link rel="alternate" hreflang="es" href="{{ .Page.Params.hreflang_alternate_url }}" />
{{ else }}
<link rel="alternate" hreflang="en" href="{{ .Page.Params.hreflang_alternate_url }}" />
<link rel="alternate" hreflang="es" href="{{ .Permalink }}" />
{{ end }}
{{ end }}
<title>{{ .Title }} {{ if not (in .Type "blog") }} | {{ if .IsHome }}Insurance Navy Brokers{{ else }}Insurance Navy{{ end }} {{ end }} </title>
<meta name="description" content="{{ .Page.Description }}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ .Page.Description }}" />
<meta property="og:url" content="{{ .Permalink }}" />
{{ if .Params.meta_keywords }}
<meta name="keywords" content="{{ .Params.meta_keywords | safeHTML }}" />
{{ end }}
{{ if .Params.coverImage }}
<meta property="og:image" content="{{ strings.TrimRight "/" .Site.BaseURL }}{{ .Params.coverImage }}" />
{{ end }}
{{ if .Params.name }}
<meta property="og:image" content="https://www.insurancenavy.com/images/insurance-navy-logo-200x200.png" />
{{ end }}
<link rel="canonical" href="{{ .Page.Permalink }}" />
{{ if .Params.custom_code_header }}
{{ .Params.custom_code_header | safeHTML }}
{{ end }}
{{ .Params.custom_code | safeHTML }}
<meta name="twitter:card" content="{{ .Title }}"><!-- required -->
<meta name="twitter:site" content="@insurancenavy"><!-- required -->
<meta name="twitter:title" content="{{ .Title }}"><!-- required -->
<meta name="twitter:description" content="{{ .Page.Description }}"><!-- optional -->
<meta name="twitter:image" content="https://www.insurancenavy.com/images/insurance-navy-logo-200x200.png"><!-- optional -->
<meta name="twitter:image:alt" content="{{ .Site.Params.company }}"><!-- optional -->
<!-- Clickcease.com tracking-->
<script type='text/javascript'>
var script = document.createElement('script');
script.async = true; script.type = 'text/javascript';
var target = 'https://www.clickcease.com/monitor/stat.js';
script.src = target;var elem = document.head;elem.appendChild(script);
</script>
<!-- <noscript>
<a href='https://www.clickcease.com' rel='nofollow'><img src='https://monitor.clickcease.com/stats/stats.aspx' alt='ClickCease'/></a>
</noscript> -->
<!-- Clickcease.com tracking-->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WGJQ4RF');</script>
<!-- End Google Tag Manager -->
<meta name="p:domain_verify" content="770fa42d936f43a6a87228479705d79f"/>
<meta name="google-site-verification" content="dS412fkSvxO_W7hIbJU8n00wnh_WuKSnGA8w-fUJA1c" />
{{ block "jsonld" . }}
{{ end }}
{{ block "opengraph" . }}
{{ end }}
{{ $fonts := resources.Get "css/font-icons.css" }}
<style>{{ $fonts.Content | safeCSS }}</style>
{{ $style := resources.Get "sass/style.scss" }} {{ $css := $style | resources.ToCSS }}
<style>{{ $css.Content | safeCSS }}</style>
</head>
<body class="stretched">
<div id="wrapper" class="clearfix">
{{ partial "header" . }}
{{ partial "nearest-location" . }}
{{ block "main" . }}
{{ end }}
{{ partial "footer" . }}
</div>
</div>
<div id="gotoTop" style="display: none;">
<i class="icon-angle-up"></i>
<span class="sr sr-only">Go to top of page</span>
</div>
{{ $jquery := resources.Get "js/jquery.js" }}
{{ $bootstrap := resources.Get "js/plugins.bootstrap.js" }}
{{ $easing := resources.Get "js/plugins.easing.js" }}
{{ $plugins := slice $bootstrap $easing | resources.Concat "js/plugins-min.js" | resources.Minify }}
{{ $functions := resources.Get "js/functions.js" }}
<script>{{ $jquery.Content | safeJS }}</script>
{{ if eq .Params.url "/auto-insurance/" }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{{ end }}
{{ if eq .Params.url "/es/seguro-de-auto/" }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{{ end }}
<script>{{ $plugins.Content | safeJS }}</script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCs9m5uzN1vxLt3MldbtZEWPjajCj_dwOo&libraries=places">
</script>
{{ block "scripts" . }}
{{ end }}
{{ if eq .Title "File A Claim" }}
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-multifile@2.2.2/jquery.MultiFile.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-file-upload/4.0.11/uploadfile.min.css" integrity="sha512-MudWpfaBG6v3qaF+T8kMjKJ1Qg8ZMzoPsT5yWujVfvIgYo2xgT1CvZq+r3Ks2kiUKcpo6/EUMyIUhb3ay9lG7A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{{ end }}
<script>{{ $functions.Content | safeJS }}</script>
{{ $site := resources.Get "/js/site.ts" | js.Build }}
{{ $secureJS := $site | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
<!-- {{ $site }} -->
<script>
{{ if eq .Title "File A Claim" }}
jQuery(window).on('load', function(){
jQuery("#date_of_incident").datepicker();
jQuery("#date_of_birth").datepicker();
})
{{ end }}
if (window.matchMedia('(min-width: 991px)').matches) {
//...
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
var default_stop = 380;
if($('#sticky-stopper-blog').length){
$stickyrStopper = $('#sticky-stopper-blog');
}
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top - 110;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top + 100;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint - default_stop < windowTop) {
if (window.matchMedia('(max-width: 1025px)').matches) {
if($('#sticky-stopper-blog').length){
$stickyrStopper = $('#sticky-stopper-blog');
$sticky.css({ position: 'absolute', top: diff - 950 });
} else {
$sticky.css({ position: 'absolute', top: diff - 480 });
}
} else {
if($('#sticky-stopper-blog').length){
$stickyrStopper = $('#sticky-stopper-blog');
$sticky.css({ position: 'absolute', top: diff - 950 });
} else {
$sticky.css({ position: 'absolute', top: diff - 500 });
}
}
$sticky.addClass('stop_sidebar');
} else if (stickyTop < windowTop+stickOffset) {
if (window.matchMedia('(max-width: 1025px)').matches) {
$sticky.css({ position: 'fixed', top: '15%' });
} else {
$sticky.css({ position: 'fixed', top: '110px' });
}
$sticky.addClass('active_sidebar');
$sticky.removeClass('stop_sidebar');
} else {
$sticky.css({position: 'initial', top: diff});
$sticky.removeClass('active_sidebar');
$sticky.removeClass('stop_sidebar');
}
});
}
}
</script>
<!-- End Facebook Pixel Code -->
</body>
</html>
Well, you’re telling it to do exactly what you don’t want it to do:
{{ $style := resources.Get "sass/style.scss" }}
{{ $css := $style | resources.ToCSS }}
<style>{{ $css.Content | safeCSS }}</style>
I think what you want is:
{{ $style := resources.Get "sass/style.scss" }}
{{ $css := $style | resources.ToCSS }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
3 Likes
Thank you very much! I really appreciate it.
1 Like
It sure is! And with almost all of it not even being used, inlining vs external would be the last of my concerns!
What is the easiest way to get rid of the unnecessary styles without removing them one by one and see if the site breaks?
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.