How to use Sass CSS (SCSS) in R-Shiny

I'm trying to integrating HTML , CSS Shiny applications and have succeeded with regular CSS; however, I'm having trouble trying to integrate Sass CSS:

To create a simple and reproducible example, I've taken corresponding HTML and CSS code from this CodePen example placing these files radio.css and radio.html into the www/ directory:

Then I create a simply app.R :

library(shiny)

ui <- fluidPage(
    includeHTML("www/radio.html"),  # include HTML
    includeCSS("www/radio.css"),    # include CSS
  )

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

This works as expected.

However, trying another example that use SCSS fails:

library(shiny)
library(shinyMobile)
library(sass) # Needed to run Sass compiler for CSS?

ui <- f7Page(
  includeHTML("www/pingpong.html"),
  includeCSS("www/pingpong.css")
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

My guess is that the css file that is presumably same as what you linked to should be saved as .scss and sass function used to compile it to the actual css file that will be included in your app.

Thanks for the quick response.

So saving that file as .scss and then copy-paste the output to a file with the name .css works somewhat sass(sass_file("my-style.scss"))

But you see that there are some errors and elements missing. For example, the white grid on the floor is gone, the tabletop for the ping-pong table has vanished and the whole ping-pong table is no longer centered (shifted-left) so that half of the scene is missing.

1 Like

Placing a link to git repo here: https://github.com/moldach/scss-shiny

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

If you have a query related to it or one of the replies, start a new topic and refer back with a link.