关于 Code Runner插件运行sass报错

全局安装 dart-sass

npm i sass -g
which sass

=>/Users/panminxiang/.nvm/versions/node/v18.20.0/bin/sass

sass 安装完成，就可在终端使用 sass 命令编译 .scss 文件 或者 .sass 文件

样本:variable.scss

$bg-color: #f00;

// 中文在目标文件中会加上  @charset "UTF-8";
$content: '你好';
.text-box {
  background-color: $bg-color;
  &::before {
    content: $content;
  }
}

终端输入:

sass variable.scss

输出:

@charset "UTF-8";
.text-box {
  background-color: #f00;
}
.text-box::before {
  content: '你好';
}

对于快速查看编译结果，可以使用 sass -w variable.scss variable.css ,也可以安装 live sass compiler 插件。
但是 live sass compiler 开启 watch 监听后，会编译当前工作空间里的所有 sass 文件，我的需求是编译我当前打开的文件，虽然可以设置 exclude 和 include,但耗时费力，遂卒

我习惯使用 Code Runner 快速查看结果:

点击运行,报错

[Running] scss --style expanded "/Users/panminxiang/Sass/教程/变量/variable.scss"
/bin/sh: scss: command not found

没有找到 scss 指令，这个 scss 指令是 Ruby Sass 提供的，我使用的是 Dart Sass,Dart Sass 仅提供了 sass 指令。

打开 Code Runner 配置，找到 Executor Map 选项，点击在 settings.json 中编辑

{
  "code-runner.executorMap": {
    "javascript": "node",
    "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
    "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "zig": "zig run",
    "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "php": "php",
    "python": "python -u",
    "perl": "perl",
    "perl6": "perl6",
    "ruby": "ruby",
    "go": "go run",
    "lua": "lua",
    "groovy": "groovy",
    "powershell": "powershell -ExecutionPolicy ByPass -File",
    "bat": "cmd /c",
    "shellscript": "bash",
    "fsharp": "fsi",
    "csharp": "scriptcs",
    "vbscript": "cscript //Nologo",
    "typescript": "ts-node",
    "coffeescript": "coffee",
    "scala": "scala",
    "swift": "swift",
    "julia": "julia",
    "crystal": "crystal",
    "ocaml": "ocaml",
    "r": "Rscript",
    "applescript": "osascript",
    "clojure": "lein exec",
    "haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
    "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
    "racket": "racket",
    "scheme": "csi -script",
    "ahk": "autohotkey",
    "autoit": "autoit3",
    "dart": "dart",
    "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
    "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
    "haskell": "runghc",
    "nim": "nim compile --verbosity:0 --hints:off --run",
    "lisp": "sbcl --script",
    "kit": "kitc --run",
    "v": "v run",
    "sass": "sass --style expanded",
    "scss": "scss --style expanded",
    "less": "cd $dir && lessc $fileName $fileNameWithoutExt.css",
    "FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "sml": "cd $dir && sml $fileName",
    "mojo": "mojo run",
    "erlang": "escript",
    "spwn": "spwn build",
    "pkl": "cd $dir && pkl eval -f yaml $fileName -o $fileNameWithoutExt.yaml",
    "gleam": "gleam run -m $fileNameWithoutExt"
  }
}

定位到 scss ，coder runner 根据语言特性使用不同的指令集，scss 语言使用 scss 指令，可以将 scss --style expanded 改成
sass --style expanded。使用全局 sass 命令编译 scss 文件

再次运行成功

[Running] sass --style expanded "/Users/panminxiang/Sass/教程/变量/variable.scss"
@charset "UTF-8";
.text-box {
  background-color: #f00;
}
.text-box::before {
  content: "你好";
}