04-20-2019

Laravel_SCSS的使用

 

SCSS可以讓寫CSS變得很優雅,

當你寫完之後她會幫你編譯成CSS,

他們之間的關係我就不多加說明了,

如果想更了解他們之間的差異可以參考從 CSS 到 SASS (SCSS) 超入門觀念引導

而進行編譯之前需要做以下幾件事。

 

Step1.

 

安裝Node.js

 

先到官網下載。

 

 

點擊安裝後出現這個,按NEXT。

 

NEXT。

 

 

看大家想安裝在哪裡都可。

 

NEXT。

 

 

NEXT。


 

Install。

 

 

耶~~完成。

 

Step2.

 

安裝npm

 

輸入npm install,有看過上一篇的人應該都安裝過了,安裝完之後我們就可以進行編譯了。

 

Step3.

 

新增style.scss

 

我們在resources的sass底下新增一個style.scss的檔案,

然後大開app.scss,在裡面打上@import "style";

因為編譯的時候只會編譯app.scss,所以要跟app說style也想加入。

 

Step4.

 

進行編譯npm run watch

 

 

因為本人的vs code無法使用npm,所以我是另外開cmd來做,

不知道有沒有人跟我一樣被電腦排擠。

 

 

編譯完成後他會顯示這個樣子,這樣我們就可以執行美化嘍~

記得cmd要一職開著,這樣才能編譯。

 

以上是對scss的簡單教學,如果有錯誤歡迎指出喔。