できない.dev

Sass「Can't find stylesheet to import」の原因と直し方

Can't find stylesheet to import は、@use の読み込み先を Sass が見つけられないと出る。
相対パスを直すか、node_modules をロードパスに足せば直る。
pkg: で始まる URL は importer の指定も要る。

公開: 更新:

症状できない · exit 65
npx sass src/styles/main.scss dist/main.css
Error: Can't find stylesheet to import.
  ╷
1 │ @use "bootstrap/scss/mixins/clearfix";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/main.scss 1:1  root stylesheet
解決後できた · exit 0
npx sass --load-path=node_modules src/styles/main.scss dist/main.css

2026-11-05 に node:22-bookworm-slim（Node.js 22.23.4 / npm 10.9.9） で実際に打って取った出力。検証環境の詳細

要約

@use で読み込む先を Sass が見つけられないと、コンパイルは次のエラーで止まる。
Dart Sass 1.106.1 の CLI では終了コードが 65 だった。

Error: Can't find stylesheet to import.
  ╷
2 │ @use "bootstrap/scss/functions";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/main.scss 2:1  root stylesheet

Can't find stylesheet to import は、相対パスかロードパスのどちらかを直せば消える。
Sass は読み込み先をまず読み込む側のファイルからの相対パスで探し、見つからないときだけロードパスを探す（公式の説明（新しいタブで開く））。
拡張子と、パーシャルの先頭の _ は省略してよい。

実行例

@use の相対パス違い、ロードパスなしの bootstrap/...、importer なしの pkg:、先頭の ~ の 4 通りで Can't find stylesheet to import. が出て、終了コードは 65 だった。
相対パスの書き直し、--load-path=node_modules、--pkg-importer=node、~ の削除で、それぞれ終了コード 0 になった。

$ npx sass --version
1.107.1 compiled with dart2js 3.13.7
$ npx sass src/styles/main.scss dist/main.css
Error: Can't find stylesheet to import.
  ╷
1 │ @use "bootstrap/scss/mixins/clearfix";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/main.scss 1:1  root stylesheet
$ echo $?
65
$ npx sass src/components/button.scss dist/button.css
Error: Can't find stylesheet to import.
  ╷
1 │ @use "variables";
  │ ^^^^^^^^^^^^^^^^
  ╵
  src/components/button.scss 1:1  root stylesheet
$ echo $?
65
$ npx sass src/styles/pkg.scss dist/pkg.css
Error: Can't find stylesheet to import.
  ╷
1 │ @use "pkg:bootstrap/scss/mixins/clearfix";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/pkg.scss 1:1  root stylesheet
$ echo $?
65
$ npx sass --load-path=node_modules src/styles/tilde.scss dist/tilde.css
Error: Can't find stylesheet to import.
  ╷
1 │ @use "~bootstrap/scss/mixins/clearfix";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/tilde.scss 1:1  root stylesheet
$ echo $?
65
$ npx sass src/components/button.scss dist/button.css
$ echo $?
0
$ cat dist/button.css
.button {
  color: #0a7;
}
 
/*# sourceMappingURL=button.css.map */
$ npx sass --load-path=node_modules src/styles/main.scss dist/main.css
$ echo $?
0
$ cat dist/main.css
.row::after {
  display: block;
  clear: both;
  content: "";
}
 
/*# sourceMappingURL=main.css.map */
$ npx sass --pkg-importer=node src/styles/pkg.scss dist/pkg.css
$ echo $?
0
$ npx sass --load-path=node_modules src/styles/tilde.scss dist/tilde.css
$ echo $?
0

— 2026-11-05 時点の出力

検証環境Node.js 22.23.4 / npm 10.9.9 / 2026-11-05 検証
検証日
実行環境
node:22-bookworm-slim Debian GNU/Linux 12 (bookworm)
バージョン
  • Node.js 22.23.4
  • npm 10.9.9

この記事の「実行例」は、上記の環境で実際にコマンドを実行して得られた出力をそのまま掲載しています。 再現手順はリポジトリの検証スクリプトとして管理し、定期的に再実行して出力を更新しています。

解決策

1. 読み込む側から見た相対パスにする

@use "../styles/variables";
 
.button {
  color: variables.$primary;
}

src/components/button.scss からは一つ上がって styles に入る。
書き直すと終了コード 0 でコンパイルできた。
パスの区切りは Windows でも / で書き、大文字小文字も実ファイルに合わせる。

2. node_modules をロードパスに足す

npx sass --load-path=node_modules src/styles/main.scss dist/main.css

JS API から呼ぶ場合は loadPaths: ["node_modules"] を渡す。--load-path は複数回指定でき、先に書いたディレクトリが優先される。

3. pkg: の URL と Node.js の importer を使う

@use "pkg:bootstrap/scss/functions";
npx sass --pkg-importer=node src/styles/main.scss dist/main.css

--pkg-importer=node は Dart Sass 1.71.0 以降で使える。
パッケージの package.json の exports などから読み込み先を決めるので、ロードパスを足さなくても通った。
JS API では importers に NodePackageImporter を渡す。

4. 先頭の ~ を外す

sass-loader のドキュメント（新しいタブで開く）でも、~ は非推奨で、コードから外すよう書かれている。@use "bootstrap/scss/functions"; か pkg: の形に直し、ロードパスか importer で解決させる。

よくある原因

  1. 相対パスの起点を取り違えている。src/styles/main.scss では通る @use "variables"; を src/components/button.scss に書くと、src/components/_variables.scss を探して同じエラーになる。
  2. npm パッケージをパッケージ名だけで書いている。
    Sass 本体は node_modules を自動では探さないので、bootstrap を入れていてもロードパスに無ければ見つからない。
  3. pkg:bootstrap/scss/functions と書いたのに、CLI に --pkg-importer=node を付けていない。pkg: の URL は importer が無いと解決されず、同じエラーになった。
  4. webpack の sass-loader 用の ~bootstrap/... を残している。~ は sass-loader が独自に解釈していた書き方で、Sass の CLI では --load-path=node_modules を付けても見つからなかった。
#sass #scss #@use #load-path #node-modules