這次帶給大家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-->