(I’d like to thank both @averyhiebert and @Lurker for making me realize that the original version of this tutorial was unfortunately stylized like an AI-written post. I’ve since then taken some steps to mitigate this effect. Man, I hate clankers.)
(Additionally, I’d like to thank everyone that provided any nice suggestions in the discussion, as it shaved some unneccessary bloat from the first edition.)
Seamless Sass integration for a Twine/SugarCube project within VSCode
(Second edition, revised & optimised)
Hey there!
I just configured something really cool and thought I share it here 
Huge thanks to @sparkletwist who pushed me into this rabbithole when she posted an answer to my question about the Sass-Twine/Sugarcube integration 
The setup
I’m developing an adult sandbox game using Twine with Sugarcube (beep beep, shameless plug, check out the link in my bio for the itchio page) using:
- VSCode with extensions:
Now, the out-of-the-box solution builds a project automatically by using a nice Twine (Twee 3) Language: Build Game VSCode command directly from the IDE.
No fuss, no command line shenanigans, just one-click plug-and-play.
The Problem
Ok, everything is nice and all, but there’s one problem:
We still have to write in pure CSS, and operate on the .css files.
Sure it works, but we don’t want to style the game like it’s still 2003, right?
So, I knew I wanted to integrate Sass into the project for the longest time.
Now, installing Sass is not a huge hurdle, but what then?
I didn’t want to do everything manually from now on, no. We want automation, we want integration with the existing, nice one-click command system the VSCode provided until then.
So, I got to work. And, like I mentioned above, I think I made something really cool.
The solution
Prerequisites
Alright, step-by-step, what do we need:
- Install Node.js
- Fire up the console (if you’re using Linux distro) or PowerShell (if using Windows)
- Navigate to your project folder
- Install the necessary dev tools:
npm init -ynpm install --save-dev sass chokidar-cli
where:sass- Sass packagechokidar-cli- for file watching
The setup
Like that jedi-man guy once said, this is where the fun begins:
Create basic SCSS file structure
- Create
stylesfolder inproject/src - Within
styles, create two files:
main.scsswith:
@use "stylesheet";in it_stylesheet.scss:
Here, copy all your CSS from your project’s.cssstylesheet (if you have more than one, just recreate them here using.scsspartial files).- Once you made sure that everything’s been copied over, delete the original
.cssfile(s).
Scripting - auto-compile Sass and save it to
UserStyleSheet.css
- Create
scriptsfolder directly in yourprojectfolder, OUTSIDE/src - Within
scripts, createbuild-css.jswith the following script
(which compiles sass files into one minified.cssstylesheet within yoursrc/folder:
import { execSync } from "child_process";
const scss = "src/styles/main.scss";
const cssFile = "src/story/UserStylesheet.css";
execSync(`npx sass ${scss} ${cssFile} --style=compressed --no-source-map`);
console.log("Styles injected into UserStylesheet");
npm scripts
Within the npm’s package.json file:
- Change the
"type":to"module" - In
"scripts":insert the following commands, so that it’ll look like that aferwards:
"scripts": {
"build:css": "node scripts/build-css.js",
"watch:css": "chokidar \"src/styles/**/*.scss\" -c \"npm run build:css\"",
"watch:twee": "chokidar \"src/**/*.twee\" -c \"echo twee changed\"",
"dev": "npm run watch:css"
},
VSCode build tasks
- If you don’t have it, add a
.vscodefolder directly in yourproject, OUTSIDE/src - Within
.vscode, create thetasks.jsonfile with the following:
{
"version": "2.0.0",
"tasks": [
{
"label": "Build CSS",
"command": "npm run build:css",
"type": "shell"
},
{
"label": "Build Twine",
"dependsOn": ["Build CSS"],
"command": "${command:twineTweeLanguage.buildGame}"
}
]
}
Misc. stuff
If you use a version control system like git, don’t forget to add /node_modules and UserStyleSheet.css to .gitignore 
(if you don’t use any version control, you should. Actually, stop everything right now and set it up. Go.)
The Outcome
Now, check it out:
Within VSCode
- You can now:
- Hit
Ctrl + Shift + B - Choose
npm: build:css
and that automatically updatesUserStyleSheet.csswith all the styling from the .sass files! The compiled css is also already minified and ready for the production build
- Hit
- And now the main thing, and the reason we did all this:
- Hit
Ctrl + Shift + P - Choose
Tasks: Run Task - Then,
Build Twine
and boom. All sass styling is automatically compiled intoUserStyleSheet.cssas a minified css, and then the Twee extension automatically builds everything into one HTML file.
In one click!
- Hit
Outside VSCode
Is that all? Nope.
You can now navigate via the Linux terminal (or PowerShell) to the project folder,
type in npm run dev, and now you have a watcher active.
This means that now the UserStyleSheet.css stylesheet is updated every time you change anyting in any .scss file!
The expected file structure
Twine project/
├── .storyformats
├── .vscode/
│ ├── settings.json (if you have any project-specific settings)
│ └── tasks.json
├── build
├── scripts/
│ └── build-css.js
├── src/
│ ├── *all other source files*
│ └── story/
│ ├── *all other story files*
│ └── UserStyleSheet.css
├── .gitignore
├── package-lock.json
├── package.json
└── t3lt.twee-config.yml
So, that’s it!
You can now convert all the CSS you copied over from the original UserStyleSheet.twee and convert them to proper Sass, as well as create multiple subfiles for each part of the UI like, I don’t know, e.g. buttons.scss, anims.scss, use all the Sass’s mixins, partials, class nesting and other good stuff
Now, I’m just a guy that makes a game in Twine and does some webdev stuff - I’m absolutely not an expert on anything VSCode, Javascript or even Twee/SugarCube - so if you have any suggestions as to how to simplify this process even further, please do tell!
Peace,
-Testy
