Web development with SvelteKit + sass-embedded?

Help
1

I recently wanted to bootstrap a new Sveltekit project to build a web app. However, in order to use .sass/.scss files for styling, I need to install the sass compiler

It looks like right now the package sass-embedded is recommended for this job. This is a native binary version of the sass compiler, which means it does not run on NixOS. I can install dart-sass globally, but there is no way to tell the npm package to use this binary instead. I’ll ask the maintainer(s), if they could add such a feature.

I guess I can also use the “old” JavaScript-based sass package for the job, but it’s slower.

How would you deal with this issue?

I’ve seen that patchelf is a thing, but I didn’t fully grasp what kind of configurations I need to apply to make it “just work”.

Here is the flake.nix I’m using right now (any feedback welcome, I’m still new):

flake.nix 
{
  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
  };

  outputs = { self, nixpkgs, ... }:
  let
    lib = nixpkgs.lib;
    system = "x86_64-linux";
    pkgs = import nixpkgs {
      inherit system;
    };
  in
  {

    devShells.${system}.default = pkgs.mkShell {
      buildInputs = with pkgs; [
        nodejs_20
        # This does not work - the npm package won't use the
        # globally installed sass binary
        dart-sass
      ];
    };

  };
}

Edit to maybe add some more links to source code. sass-embedded will spawn a sub-process. However, the value to the binary is not user-defined, but rather computed based solely on the current system (Linux, Windows, Mac).

1 Like
2

As a small update, I’ve contacted the maintainers at the sass-embedded package and they don’t want to support using a custom/globally installed binary, as it could very easily lead to protocol mismatches and crashes.

But I’ve found a workaround, that at least works for me right now. If you want to follow along, here is the link to the discussion: