Zenn
🦥

scssコンパイルではシンボリックリンクファイルにご注意を...

2024/07/23に公開
Scss
Laravel Mix
tech

scssコンパイルにlaravel mixを使った際、コンパイルがなぜかできず
原因が分かるまでうむむ...となったので備忘録がわりにまとめます。
結論はタイトル通りです。

https://laravel-mix.com/

環境

node.js v22.2.0
windows

プロジェクト作成

  1. laravel-mixのインストール
npm install laravel-mix

インストールすると自動的にpackage.jsonと package-lock.json が作成されます。

  1. コンパイルするscssファイルを作成
index.scss
$red: #ff0000;

.err {
  color: $red;
}
  1. シンボリックリンクファイルを作成する
$ mklink alias.scss index.scss
alias.scss <<===>> index.scss のシンボリック リンクが作成されました
  1. webpack.mix.jsを作成する
webpack.mix.js
let mix = require('laravel-mix');

mix.sass('index.scss', 'dist/');
mix.sass('alias.scss', 'dist/');
  1. コンパイル
npx mix

初回は以下のようなメッセージが表示されるので、もう一度コマンドを実行する

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install sass-loader@^12.1.0 sass resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
 
        Finished. Please run Mix again.

事象発生

npx mix

● Mix █████████████████████████ emitting (95%)
 emit




● Mix █████████████████████████ done (99%) plugins
 WebpackBar:done


✔ Mix
  Compiled successfully in 1.61s

   Laravel Mix v6.0.49   


✔ Compiled Successfully in 1496ms
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                      File │ Size     │
├───────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                            dist/index.css │ 28 bytes │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully
Notifications are disabled
Reason: DisabledForUser Please make sure that the app id is set correctly.
Command Line: C:\xxxx\yyy\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe -appID "Laravel Mix" -pipeName \\.\pipe\notifierPipe-394f7941-4606-4485-8593-00e572ad0192 -p C:\sandbox\mix\node_modules\laravel-mix\icons\laravel.png -m "Build successful" -t "Laravel Mix"

alias.scssがコンパイルされていない...。

まとめ

シンボリックリンクファイルの実態はあくまでファイル参照先ディレクトリパスなので
コンパイルしようがないというわけです
シンボリックリンクファイルを対象にしていないか確認しておく[1]、ですね。

脚注

  1. vscodeではシンボリックリンクファイル(フォルダ)は↪(リターン矢印)が表示されるのでそこで見分けるとよかったのかもと思います ↩︎

Discussion