vue-cli 和 sass 的開啟方式圖文詳解

本文主要透過圖文並茂的形式向大家介紹了vue-cli + sass 的正確開啟方式，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能幫助到大家。

關於在vue-cli搭建的專案中怎麼配置sass，網路上搜到的基本就是這個答案：

但是我認為，直接將樣式寫在每個單文件的 裡，是十分不明智的做法。且不說node-sass安裝過程的各種坑，內嵌的 也讓組件顯得十分混亂。想像你在修改某個methods時必須拖曳滾輪穿越幾十上百行的css程式碼，又或者為了修改一組樣式，卻找不到對應的css文件，因為它們散佈在vue文件裡。 。 。

在我看來，正確的做法應該是單獨管理sass文件，然後在main.js中直接引入編譯好的css文件。像iView， ElementUI 都是採用這種做法。

如果你認同並且打算採用這種方式，看下面這個具體的例子：

項目結構如上圖，style資料夾下是分門別類的scss文件，方便管理和後期維護。然後在main.scss引入所有的scss樣式片段，使用 sass --watch main.scss:main.css 指令監聽並將scss檔編譯為css檔。最後在main.js中引入main.css檔案。這樣你就可以直接在元素上加入class，然後在scss中暢快寫樣式了。

當然我們不希望每次手動輸入這些指令，初步想法是透過修改dev指令，：

#但是這樣並不能達到效果，因為每次只會啟動前一個指令。於是考慮到使用批次來實作：

#將這兩個.bat放在根目錄下，然後設定package.json ：

這樣就可以使用npm run dev 一鍵啟動hot reload 和sass watch了。