vue-cli + sass 的正確打開方式圖文詳解
關于在vue-cli搭建的項目中怎么配置sass，網上搜到的基本是這種答案：
但是我認為，直接將樣式寫在每個單文件的<style>里，是十分不明智的做法。且不說node-sass安裝過程的各種坑，內嵌的<style>也讓組件顯得十分混亂。想象一下你在修改某個methods時必須拖動滾輪穿越幾十上百行的css代碼，又或者為了修改一組樣式，卻找不到對應的css文件，因為它們散布在vue文件里。。。
在我看來，正確的做法應該是單獨管理sass文件，然后在main.js中直接引入編譯好的css文件。像iView， ElementUI 都是采用這種做法。
如果你認同并且打算采用這種方式，看下面這個具體的例子：
項目結構如上圖，style文件夾下是分門別類的scss文件，方便管理和后期維護。然后在main.scss引入所有的scss樣式片段，使用 sass --watch main.scss:main.css 命令監(jiān)聽并將scss文件編譯為css文件。最后在main.js中引入main.css文件。這樣你就可以直接在元素上添加class，然后在scss中暢快寫樣式了。
當然我們不希望每次手動輸入這些命令，初步想法是通過修改dev命令，：
但是這樣并不能達到效果，因為每次只會啟動前一個命令。于是考慮到使用批處理來實現(xiàn)：
將這兩個.bat放在根目錄下，然后配置package.json：
這樣就可以使用 npm run dev 一鍵啟動 hot reload 和 sass watch了。
總結
以上所述是小編給大家介紹的vue-cli + sass 的正確打開方式圖文詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了vue面試之new Vue的時候到底做了什么原理及vue加載流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue Element前端應用開發(fā)之用戶管理模塊的處理
本篇隨筆以權限管理模塊中的用戶管理為媒介，進行相關功能的介紹和界面設計的處理。2021-05-05
??Vuex?是一個專為?Vue.js?應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)。本文會通過一些簡單的示例，為大家詳細講解Vuex的使用，感興趣的小伙伴可以跟隨小編一起學習一下2022-11-11
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue富文本的實現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關于vue實現(xiàn)富文本編輯器的相關資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue多語言轉換的幾種方法總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了vue下拉菜單組件（含搜索）的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
今天小編就為大家分享一篇vue 中滾動條始終定位在底部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在本篇文章里小編給大家整理的是關于Vue+Vuex實現(xiàn)自動登錄的知識點詳解，需要的朋友們可以學習下。2020-03-03
這篇文章主要給大家介紹了關于vue項目中如何使用TypeScript相關配置的相關資料,typescript在開發(fā)過程中廣泛被應用,在這里總結下項目中ts的應用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11