Blogdown::build_site Doesn't See Custom css File

I wish to have a blogdown post using a reactable table that has a column that only contains shaded squares.

Below are the .Rmd and css file to demonstrate this issue. In RStudio, if I click "Knit" the table appears with the shaded green squares.

Again in RStudio, if I run

blogdown::build_site(local = FALSE, method = c("html", "custom"), run_hugo = TRUE)

the site builds, but the post with the table has a blank "Status" column. No shaded squares.

How do I build the site and have the shaded squares appear?

.Rmd

---
title: Test Colored Squares
author: ''
date: '2020-09-05'
slug: test-colored-squares
categories: []
tags: []
output: 
  html_document:
    css: "~/R/whatbank_hugo/src/square-highlight.css"
---

```{r, echo=FALSE, message=FALSE, warning=FALSE}
# From: https://glin.github.io/reactable/articles/cookbook/cookbook.html

library("tidyverse")
library("reactable")

orders <- data.frame(
  Order = 2300:2304,
  Created = seq(as.Date("2019-04-01"), by = "day", length.out = 5),
  Customer = sample(rownames(MASS::painters), 5),
  Status = c("", "", "", "", "")
)

reactable(orders, columns = list(
  Status = colDef(cell = function(value) {
    class <- paste0("tag box green", tolower(value))
    htmltools::div(class = class, value)
  })
  
))
```

square-highlight.css

.row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.box {
  height: 20px;
  width: 20px;
  border: 1px solid black;
  margin-right: 5px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

Solution

CSS files should be placed in the folder /themes/<theme_name>/static/css: after rmarkdown renders your post to HTML, blogdown generates the site and creates a folder structure containing all files needed for the final website. These files are located in the project directory /public. Here you will find your CSS files (/public/css).

If the blog post is created with html_document(), the path to the CSS files is missing in the final HTML document. You should therefore use blogdown's default template via blogdown::html_page(): place

output: 
  blogdown::html_page:
    css: "/css/square-highlight.css"

in your YAML header.