vue-cli + sass 的正確開啟方式

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

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

但是我認為，直接將樣式寫在每個單文件的

在我看來，正確的做法應該是單獨管理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了。

相關推薦：

實例詳解vue-cli優化的webpack設定

實例詳解vue-cli vscode 設定eslint

vue-cli快速建立vue應用並實作webpack打包詳解

以上是vue-cli + sass 的正確開啟方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！