Empty Blog Page after PurgeCSS Integration

dev
1

Hello, everyone,

A few days ago I integrated PurgeCSS and converted my CSS to SCSS to get a few more points in page speed. What worked well at first turned out to be a problem. The day after I noticed that all my blog articles are available, but the page no longer contains HTML or CSS, only JavaScript code remains.

This is the remaining sourcecode when i run “hugo serve”

<script>
	var remark_config = {
	  host: 'https://comments.german-outdoors.de',
	  site_id: 'germanoutdoors',
	  components: ['embed', 'last-comments'],
	  max_shown_comments: 100,
	  theme: 'light',
	  locale: 'de',
	  show_email_subscription: true
	}
  </script>
<script>!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);</script>

Of course I did a rollback right away so that the pages are online again, but since then I’ve been trying to solve the problem locally and don’t know what to do anymore. I actually thought that I simply had to adapt the postcss.config.js file, but somehow it doesn’t help.

Maybe someone with more experience can help me?

Thats the config:

module.exports = {
    plugins: {
    '@fullhuman/postcss-purgecss': {
      content: ['./**/*.html', './**/*.js', './**/**/*.html', './**/**/*.js'],
    },
    autoprefixer: {
      browsers: [
        "last 2 versions",
        "Explorer >= 8",
      ]
    },
  }
};

My SCSS:


{{ $scssMain := "scss/plugins.scss"}}
{{ $css := resources.Get $scssMain | toCSS | postCSS | minify | fingerprint }}
<link rel="preload" href="{{ $css.RelPermalink }}" as="style">
<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.integrity }}">

{{ $scssMain := "scss/elements.scss"}}
{{ $css := resources.Get $scssMain | toCSS | postCSS | minify | fingerprint }}
<link rel="preload" href="{{ $css.RelPermalink }}" as="style">
<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.integrity }}">

{{ $scssMain := "scss/custom.purged.scss"}}
{{ $css := resources.Get $scssMain | toCSS | postCSS | minify | fingerprint }}
<link rel="preload" href="{{ $css.RelPermalink }}" as="style">
<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.integrity }}">

{{ $scssMain := "scss/main.scss"}}
{{ $css := resources.Get $scssMain | toCSS | postCSS | minify | fingerprint }}
<link rel="preload" href="{{ $css.RelPermalink }}" as="style">
<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.integrity }}">

All other pages are fine, only the pages under “/blog/**” are empty

Regards
Marco

2

Ok, solved… RTFM helped this time. I just used the postcss.config.js file from this page:

3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.