Compiling SCSS
I’ve been using CodeKit for years and years to compile SCSS. I have my own framework in there that compiles via imports into about 30 projects. It’s getting super slow and I’m wondering if there is a better alternative?
9 Replies
There are a few ways, it really depends on your stack/dev env
Personally I would use Vite, or just write a watch script
Minimum Static Site Setup with Sass | Stephanie Eckles
Use this command line combination for building a static site that includes Browsersync, processing Sass and running the final files through autoprefixer and cssnano.
Depending on your needs Vite alone might not cut it but recently I found https://vituum.dev/guide/ which is really handy
Vituum
Small and fast static site generator for Vite
but Vite works with sass out of the gates, you can just use .scss files and it will build them.
Also includes postCSS that you can configure.
Thanks! I haven’t heard of Vite will look into that today.
Had a chat with our development team head today to find out a little bit more about our dev environment. The new environment is running Laravel and Vite, the vite config file already exists. I asked him to have a look if he could set up the compiling for me and he came back telling me it’s not possible to set up the compiling in the way I have been doing it with CodeKit. In CodeKit I have a framework that contains all the core scss files and I then add each customer folder into CodeKit. Each customer folder has another scss folder containing main.scss and variables.scss. Main.scss imports the framework partials into it which then get compiled into a css file for each customer (a theme for each customer). Is he correct that it’s not possible to achieve this with Vite? And if he’s wrong, can anyone point me in the direction of some documentation or tutorial? I know it’s a slightly unusual set up.
I mean you can do anything you want in Vite, its powerful as all getup. Now how much work you have to put into configuring custom stuff like that? idk I hate tooling 🤣
You can absolutely specify* what folders get built into though
https://vitejs.dev/guide/build.html#customizing-the-build
Probably going to be some Rollup options too 🤷♂️
https://rollupjs.org/configuration-options/
Also my first link (in first post) I gave you also shows how to make a custom watch script
Which you could probably setup to do something as well 🤷♂️ I'm having a hard time visualizing what you are asking though so could be wrong ig.
Thanks. Feel like maybe he gave it a 20 min look and decided he’d had enough 🤣 and now I’m on a mission as the css person to make it happen. I’ll properly document the set up tomorrow sketch out the set up tomorrow. Just really trying to make sure I’m not chasing a dream. Tooling is not my thing either.
Good luck! be awesome if you shared any solutions you came up with to help others.
Yeah will do if I solve it.