這次帶給大家vue-cli sass使用詳解，vue-cli sass使用的注意事項有哪些，以下就是實戰案例，一起來看一下。 我認為，直接將樣式寫在每個單一檔案的裡，是十分不明智的做法。且不說node-sass安裝過程的各種坑，內嵌的<style>也讓組件顯得十分混亂。想像你在修改某個methods時必須拖曳滾輪穿越幾十上百行的css程式碼，又或者為了修改一組樣式，卻找不到對應的css文件，因為它們散佈在vue文件裡。 。 。 </p> <p> 在我看來，正確的做法應該是單獨管理sass文件，然後在main.js中直接引入編譯好的css檔案。像iView， ElementUI 都是採用這種做法。 </p> <p>tyle資料夾下是分門別類別的scss文件，方便管理和後期維護。然後在main.scss引入所有的scss樣式片段，使用 sass --watch main.scss:main.css 命令監聽並將scss檔編譯為css檔。最後在main.js中引入main.css檔案。這樣你就可以直接在元素上加入class，然後在scss中暢快寫樣式了。 </p> <p> 當然我們不希望每次手動輸入這些指令，初步想法是透過修改dev指令，</p> <p>但是這樣並不能達到效果，因為每次只會啟動前一個指令。於是考慮到使用批次來實作：</p> <p># 將這兩個.bat放在根目錄下，然後配置package.json：</p> <p style="text-align:center;"># </p> <p> 這樣就可以使用 npm run dev 一鍵啟動 hot reload 和 sass watch了。 </p> <p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p> <p>推薦閱讀：</p> <p><a href="http://www.php.cn/js-tutorial-392854.html" target="_blank">Date物件怎麼做出倒數計時功能</a><br></p> <p><a href="http://www.php.cn/js-tutorial-392852.html" target="_blank">#vue中v-model動態使用詳解</a><br></p> <!--content end-->
