What is the recommended Replit setup if you want to build a static HTLM page while utilizing preprocessors like SASS or PUG?

Replit Help
1

I’m new to Replit and wondering how to setup a project to work on a simple, static HTML page while also using HTML/CSS preprocessors like SASS or PUG?

Basically, I would like to have a setup like Codepen, but with the cool Replit features like having multiple source files, etc.

I noticed there are basically 2 replit templates:

  1. HTML, CSS, JS - This seems like the desired template (it has the Webview), but I have no idea how to select SASS/PUG preprocessors. I guess I would need to install them manually, but then I would need node.js which isn’t in that template, correct?

  2. Node.js - This template allows you to install preprocessors using npm. But I guess it’s dedicated rather for servers than for a simple static page, because I see there is the “index.js” as entrypoint.

I was looking into Replit docs, but can’t really find any notes about preprocessors and the official templates doesn’t help me much either.

1 Like
2
  1. add sass via Nix to an HTML repl. In shell:
sed -i 's/];/  pkgs.sass\n  &/' replit.nix
  1. create .css files with same name and location as each of your .scss files.
  2. Each time you update you would have to run in shell (replace scss with sass here if you’re using sass files, but I would personally prefer scss):
shopt -s globstar
sass $(for i in **/*.scss
do echo $i:${i%scss}css
done)
  1. refer to the files in the HTML by the CSS files outputted, not the SCSS files
2 Likes