Zenn
🍨

Deno + Vite + React環境でSassを使う方法

に公開
React
Deno
Vite
tech

はじめに

Denoのドキュメント
https://docs.deno.com/deploy/tutorials/vite/
でdeno run -RWE npm:create-vite-extra@latestしたプロジェクトでSassを使う方法のメモです。
適当に.scssファイルを作ってdeno task devした後、http://localhost:5173/ にアクセスしたらこんなエラー画面が出ました。(初めからサポートされていると勘違いしていた)

[plugin:vite:css] Preprocessor dependency "sass-embedded" not found. Did you install it? Try `deno add -D sass-embedded`.

結論

deno add -D npm:sass-embeddedします。-Dオプションを付けると開発環境向けにインストールになります。

PS > deno add -D npm:sass-embedded
Add npm:sass-embedded@1.85.1

このあと、deno.jsonを確認するとちゃんとインストールされていました。

deno.json
{
  "tasks": {
    "dev": "deno run -A --node-modules-dir npm:vite",
    "build": "deno run -A --node-modules-dir npm:vite build",
    "preview": "deno run -A --node-modules-dir npm:vite preview",
    "serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
  },
  "compilerOptions": {
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "jsxImportSourceTypes": "@types/react"
  },
  "imports": {
    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
    "@types/react": "npm:@types/react@^19.0.10",
    "@types/react-dom": "npm:@types/react-dom@^19.0.4",
    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.4",
    "react": "npm:react@^19.0.0",
    "react-dom": "npm:react-dom@^19.0.0",
+    "sass-embedded": "npm:sass-embedded@^1.85.1",
    "vite": "npm:vite@^6.1.1"
  }
}

Viteの公式ドキュメントにもこんな記載がありました。

Vite は .scss、.sass、.less、.styl、.stylus ファイルの組み込みサポートを提供します。それらに Vite 固有のプラグインをインストールする必要はありませんが、対応するプリプロセッサー自体をインストールする必要があります。

# .scss and .sass
npm add -D sass-embedded # または sass

注意点

画面に出たエラー文はdeno add -D sass-embeddedと書いてありましたが、素直に実行するとerrorとなってしまい失敗しました。こんなメッセージが表示されます。

PS > deno add -D sass-embedded
error: sass-embedded is missing a prefix. Did you mean `deno add npm:sass-embedded`?

Discussion