Any Example on how to generate css per page?

support
1

Hi Im using tailwind css / unocss

My concerns is the css is sitewide

I wanna scope the css on a template level / page level

{{- block "css" . }}

I wanna generate the css. on blog pages
Im assuming code will look like this

{{ define "main" }}
{{- $page := $.Page.Title -}}
{{- $unocss := resources.Match "css/*.css" | resources.Concat "css/blog/$page.css" -}}
<link rel="stylesheet" href="{{ $unocss.RelPermalink }}" />
{{end}}

i got 1 files in css/
reset.css

and the other css that will be concat is per page

Since There a way we can put content in the markup like shortcode or main content itself

is it also possible to parse that classess of css?

so i can update the code above?

so i guess i need to update my scripts then on package.json

    "uno-dev": "unocss \"layouts/**/**/*.html\" --watch -o ./assets/css/uno.css",

to add more folders to watch but the problem is here…

only one output file can be generated…

is there a way i can programatically use hugo to run unocss cli to create different css based on page?

2

may be have a look at Add a specific css to each page - #2 by divinerites

3

it doesnt sound difficult what you are trying to do.

lets assume(since I don’t know your project structure) you have 2 pages

  • Home
  • Blog

and you have 3 css or scss files in assets/css/

  • reset.scss
  • main.scss
  • blog.scss

and you have some special css which you only want to be shown on homepage just define each file before making 1 file do like this:

{{ $reset := resources.Get "css/reset.scss" | postCSS }}
{{ $main := resources.Get "css/main.scss" | postCSS }}
{{ $blog := resources.Get "css/blog.scss" | postCSS }}

{{ if .IsHome }}
{{ $homepage = $reset  $main | toCSS (dict "targetPath" "main.css") | minify | fingerprint | resources.PostProcess }}
<link rel="stylesheet" href="{{ $homepage.RelPermalink }}" />

{{else}}

{{ $blog = $reset  $blog | toCSS (dict "targetPath" "main.css") | minify | fingerprint | resources.PostProcess }}
<link rel="stylesheet" href="{{ $blog.RelPermalink }}" />

{{end}}

this works fine for an example site I did with Hugo.

thanks

a side note why not just use tailwindcss where it basically clean css for you?

4

@pitifi9191

i dont think my solution or workaround is best

 "uno-home": "unocss \"layouts/index.html\" --watch -o ./assets/css/home.css",
"uno-blog": "unocss \"layouts/blog/*.html\" --watch -o ./assets/css/blog.css",
"css-watch": "run-p uno-home uno-blog"

just to generate css for home and blog

its impossible with the current unocss cli to generate multiple output file
or set the config to read a file path or folder with pattern and to choose different output file…

If that is possible then Im sure i wouldnt be using my solution above

5

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