前端好難,SASS可以幫助我們使用程式邏輯產生CSS和JS
就可以知道現在安裝的版本號,如果偵測到沒安裝
則會顯示「不是內部或外部命令、可執行的程式或批次檔。」
接著執行
初始化套件
這時候如果執行
npm run dev
就會進行編譯,把 \resources\assets\sass 內的資料編譯後儲存在
\public 對應的資料夾下,詳細設定可以在 \webpack.mix.js 中看到
接下來我們把之前的 css 檔案直接複製貼上到
\resources\assets\sass\app.scss
再進行一次 npm run dev 編譯
記得把 view 引入的 CSS路徑更新!
發現問題了嗎?
如此作法,我們每次更改 CSS 都要重新編譯,這樣不是很麻煩嗎?
有如脫褲子放屁
當然有解決的方法!
npm run wstch
這個指令定義可以在 \package.json 中找到
之後 SASS會自行偵測是否有改動SCSS檔案,並且重新編譯
這樣用起來就和以前直接改CSS檔案一樣了呢!
如此就是 Laravel的前端第一次接觸
未來應該會搭配 Vue.js 來進行,就照著影片慢慢來
就來認識一下吧
Laravel 本身就有內建SASS,但是要使用SASS你要先安裝 nodejs
要做的事情就是,下載nodejs然後下載之後安裝
同時也會安裝 npm
同時也會安裝 npm
怎麼判斷有沒有安裝好呢?
讓我們重新打開 cmd ,一定要重新打開!不然吃不到設定黨喔
之前被這個雷過
使用
node -v
npm -v
就可以知道現在安裝的版本號,如果偵測到沒安裝
則會顯示「不是內部或外部命令、可執行的程式或批次檔。」
接著執行
npm -install
初始化套件
這時候如果執行
npm run dev
就會進行編譯,把 \resources\assets\sass 內的資料編譯後儲存在
\public 對應的資料夾下,詳細設定可以在 \webpack.mix.js 中看到
接下來我們把之前的 css 檔案直接複製貼上到
\resources\assets\sass\app.scss
再進行一次 npm run dev 編譯
記得把 view 引入的 CSS路徑更新!
發現問題了嗎?
如此作法,我們每次更改 CSS 都要重新編譯,這樣不是很麻煩嗎?
有如脫褲子放屁
當然有解決的方法!
npm run wstch
這個指令定義可以在 \package.json 中找到
之後 SASS會自行偵測是否有改動SCSS檔案,並且重新編譯
這樣用起來就和以前直接改CSS檔案一樣了呢!
如此就是 Laravel的前端第一次接觸
未來應該會搭配 Vue.js 來進行,就照著影片慢慢來
留言
張貼留言