`templ generate` is loading my layout into styles.css

[wjorden]

Before you begin Please make sure you're using the latest version of the templ CLI (go install github.com/a-h/templ/cmd/templ@latest), and have upgraded your project to use the latest version of the templ runtime (go get -u github.com/a-h/templ@latest)

Describe the bug A clear and concise description of what the bug is.

When designing my website, I noticed that I keep getting

The stylesheet http://localhost:8080/assets/styles.css was not loaded because its MIME type, “text/html”, is not “text/css”.

When looking at styles.css, my layout.templ file is loaded with everything filled in and overwrites the css I have set. I've tried going the public/ route to see if it made a difference, but it did not.

This occurs with every project I've tried to build.

To Reproduce A small, self-container, complete reproduction, uploaded to a Github repo, containing the minimum amount of files required to reproduce the behaviour, along with a list of commands that need to be run. Keep it simple.

https://github.com/CaffeineOrDeath/issues-log/templ

All commands used in order of use:

go mod init templ-issue
go get github.com/a-h/templ/cmd/templ@latest
touch main.go test.templ styles.css
[write files]
templ generate
go run .
[error is visible]
go build .
./templ-issue
[error is visible]

Expected behavior A clear and concise description of what you expected to happen.

Load my css file and not overwrite it with a template.

Screenshots If applicable, add screenshots or screen captures to help explain your problem.

Logs If the issue is related to IDE support, run through the LSP troubleshooting section at https://templ.guide/commands-and-tools/ide-support/#troubleshooting-1 and include logs from templ

templ info output Run templ info and include the output.

Desktop (please complete the following information):

• OS: [e.g. MacOS, Linux, Windows, WSL]
• templ CLI version (templ version)
  • Go version (go version)
  • gopls version (gopls version)

(✓) os [ goos=darwin goarch=arm64 ] (✓) go [ location=/opt/homebrew/bin/go version=go version go1.23.0 darwin/arm64 ] (✓) gopls [ location=/Users/dwir/.local/share/nvim/mason/bin/gopls version=golang.org/x/tools/gopls v0.16.1 ] (✓) templ [ location=/Users/dwir/.local/share/nvim/mason/bin/templ version=v0.2.771 ]

Additional context Add any other context about the problem here.

[a-h]

You're only serving up the templ component.

https://github.com/CaffeineOrDeath/issues-log/blob/51d44f0d4e591a2f0de487cad8eca26b80054650/templ/main.go#L16

You haven't told the Go web server that you want to serve the css file too, e.g.:

https://github.com/a-h/templ/blob/dcc8987d50eb770918e08bbe3d0cebab5da5afd0/examples/counter-basic/main.go#L47-L59

[wjorden]

Ok, gonna ask what sounds like stupid question, but curious since I haven't found where templ is writing its own css file. It fails to load that as well. It only load what's written in style tags. Unless it's only generating css when the css wrapper is used.

Passing an external name.css should not cause it to be overwritten, but should either append it, or only create its own.

ETA: The latter is how htmx handles their own css.

[a-h]

You haven't told the go web server to serve styles.css, you've only told the Go web server to run the templ HTTP handler regardless of the URL, that's why you're seeing the templ generated code at /styles.css.

You'll need to add a route to the HTTP router (http.Handle, http.HandleFunc, or ServeMux) that returns the CSS file when you visit that URL.

[wjorden]

Pushed the updated code including

http.Handle("/styles/", http.StripPrefix("/styles", http.FileServer(http.Dir("./styles"))))

It still overwrites styles.css.

[wjorden]

It is an env problem. I tried continuing to get it to work and ran into the dreaded command not found when running templ generate. Thanks for pointing me in the right direction, I now have to dive through my configs to see where things are being overwritten.