Vimux / Mainroad

Responsive, simple, clean and content-focused Hugo theme based on the MH Magazine lite WordPress theme
https://mainroad-demo.netlify.app/
GNU General Public License v2.0
893 stars 454 forks source link

Custom CSS doesn't copy from assets to build directory #162

Open gleicher opened 4 years ago

gleicher commented 4 years ago

Because of the way the permalinks are loaded with customCSS files, the assets are not copied over (even though the links are placed into the html).

The fix is to replace line 21 of baseof.html with the two lines: {{ $style := resources.Get . }} <@ link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous" media="screen" >

(note - I had to put @ to prevent things being interpreted) These lines are taken from: https://discourse.gohugo.io/t/where-do-i-edit-a-themes-css/18551/7

The explanation for why it works is on: https://gohugo.io/getting-started/directory-structure/

which says: Only the files whose .Permalink or .RelPermalink are used will be published to the public directory.

Sorry that I can't do a pull request (I don't have the theme as a separate repo to clone)

oshliaer commented 4 years ago

I'm not sure that it works like in the topic.

As you can see the theme from there uses proc of SASS.

For the Mainroad the solution from here is more suitable.

As for me I'm removing public and resources as often as possible.

Please check it again. It works for me fine for the theme's static folder and the site's static folder too.

gleicher commented 4 years ago

I don't think it is a caching issue - I tried turning off the cache (as the page you point to suggests), but it doesn't help. It could be you are accessing the CSS resources from somewhere else that makes things work for you.

You are correct that my solution doesn't account for SASS (neither does the default baseof). It also didn't do template expansion. So, here is a more correct solution (OK, you can see I am a go template newbie since I don't know how to make $. work, so I used the temp variable)

    {{ $dot := . -}}
    {{ range .Site.Params.customCSS -}}
    {{ $style := resources.Get . | resources.ExecuteAsTemplate . $dot | resources.ToCSS }}
  <@link rel="stylesheet" href="{{ $style.RelPermalink }}" crossorigin="anonymous" @>
    {{- end -}}

(note: I put in @ to avoid this being interpreted as HTML)

This may run all CSS files through the SASS processor - depending on how smart ToCSS is. This shouldn't be a problem (CSS is valid SASS).

Vimux commented 4 years ago

Custom CSS doesn't copy from assets to build directory

It's not provided for. There is no mention in repository that customCSS (or JS) should work with assets files.

Your proposal is not backward compatible and handles assets files only.