vue-cli+sass使用詳解

這次帶給大家vue-cli sass使用詳解，vue-cli sass使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

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

tyle資料夾下是分門別類別的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了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！