Laravel Scssをセーブしたがcssが作成されない。

Question

Laravelを作成してサーバーへデプロイしました。

その後public/scssファイルを作成しセーブしたのですが新たにpublic/cssにcssファイルが作成されません。
しかしローカルで使用していたscssファイルを書き換えセーブをするとcssには反映されています。
二日調べましたが新規のscssが作成されずに困っております。

その他は特に以前と変わらずに使用できています。
キャッシュのクリアや「npm run dev」などは試しているのですがうまくいきませんでした。
何か思い当たる事があればお教え頂けませんでしょうか。
宜しくお願いし致します。

npm run dev
//////////
98% after emitting SizeLimitsPlugin

DONE  Compiled successfully in 12664ms               17:08:23
       Asset     Size   Chunks             Chunk Names
/css/app.css  178 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

それぞれは下記に入っています。
laravel/public/css
laravel/public/scss

ここはローカルの時から変更はしていないと思います。

現在調査中なのですがkawaxさんよりご助言を頂きまして触っていたのですが
app.scssが立ち上げたままの状態でセーブをするとエラーになりました。
調べていると「variables」というものがローカルで作業をしていた時のパスを示しておりました。

Laravel5.8
PHP7.2
npm 3.5.2
node v8.10.0

Comments

[m.ts10806]

サーバー環境詳細もご提示ください。
Scssコンパイルに必要な環境は揃ってるのでしょうか

[kai0310]

npm run devの実行結果はなんですか？

[yonn]

m.ts10806さん
ありがとうございます。
サーバー環境ConohaのVpsを使用しております。
node -v
v8.10.0
とありますが本番環境ですと何か別に必要になりますでしょうか。

[kai0310]

webpack.mix.jsで新規で作成したファイルを定義できていないのでは。
ファイルの提示をお願いします。

[tu789]

あまりにも情報量が少ないと思います。
回答者がその情報から再現できるかどうか一度考えて修正してみてください。

[tu789]

> その後public/scssファイルを作成しセーブしたのですが新たにpublic/cssにcssファイルが作成されません。

あまり意味が分からないのですが、scssファイルもそのままデプロイしなかったのでしょうか？もしくはそれとは別のファイルってこと？

[yonn]

コメントありがとうございます。
scssファイルを作成しセーブすると以前はpublic/cssに同じ名前のcssファイルが作成されていたような気がするのですがcssファイルと繋がっていないようです。

scssやhtmlなど全てそのまま移行しました。
情報が少なく申し訳ございません。

仕組みが理解できず現在どこを調べれば良いのかがわからずにおりました。
回答者様が必要な情報がわからず申し訳ありません。

[yuki84web]

初期設定状態であればnpm run devで生成されるcssの元のファイルはresourceディレクトリ内のscssだと思うのですが…

[yonn]

そうなのですか。
全てが初めてなので何かの参考書を参考にして行ってしまったのかもしれません。
ありがとうございます。
もう一度調べてみます。
とても参考になります。

Answer 1

scssファイルを置く場所はresources/sass/

新しくnew.scssを作ったとする。
↓
app.scssでnew.scssを読み込む。

@import 'new'

↓
npm run prodでビルド。
↓
public/cssにビルド後のcssファイルが作られる。

ソースはresourcesに置く。
ビルド後のファイルはpublicに自動的に置かれる。
基本的にpublic内は自分で触らない。
画像くらいならいいけどcss,jsは絶対に直接publicには置かない。
必ずresourcesに置いてlaravel-mixを通してpublicへ、がLaravelでの基本。

（Laravel8時代のデフォルトではscss使われてないけどmix使う原則は変わらず）

余談

Laravelユーザーはこの辺りのフロントの知識がない人がびっくりするほど多い。
他のフレームワーク使ってきてPHPは分かってるつもり、フロントはjQuery書いてただけ程度の人が多い。
こういう人がLaravel使うと地獄のようなひどいものが出来上がる。
何度見たか分からないけど大惨事。

「JSやCSSはビルドして使う」に変わった大きな転換点が10年くらい前にあった。
Cなどのコンパイラ言語と同じになっただけなので分かってる人はすんなり受け入れたけど
PHPしか知らない人はビルドして使うって概念をなかなか理解できなかった。

実のところLaravel使うために必要な知識はPHPよりもフロント。

Comments

[yonn]

ありがとうございます。
さっそく試してみているのですがapp.scssファイルにエラーが出てしまいました。
@import 'new';
を打つ前、立ち上げてすぐセーブをする時点でエラーが出てしまいました。

kawaxさんのおっしゃるように私がどこかで学んだpublicにscssフォルダを作ってcssをビルドすると言う方法がいけなかったのかもしれません。