vue-cli + sass 的正確打開(kāi)方式圖文詳解
關(guān)于在vue-cli搭建的項(xiàng)目中怎么配置sass，網(wǎng)上搜到的基本是這種答案：
但是我認(rèn)為，直接將樣式寫(xiě)在每個(gè)單文件的<style>里，是十分不明智的做法。且不說(shuō)node-sass安裝過(guò)程的各種坑，內(nèi)嵌的<style>也讓組件顯得十分混亂。想象一下你在修改某個(gè)methods時(shí)必須拖動(dòng)滾輪穿越幾十上百行的css代碼，又或者為了修改一組樣式，卻找不到對(duì)應(yīng)的css文件，因?yàn)樗鼈兩⒉荚趘ue文件里。。。
在我看來(lái)，正確的做法應(yīng)該是單獨(dú)管理sass文件，然后在main.js中直接引入編譯好的css文件。像iView， ElementUI 都是采用這種做法。
如果你認(rèn)同并且打算采用這種方式，看下面這個(gè)具體的例子：
項(xiàng)目結(jié)構(gòu)如上圖，style文件夾下是分門(mén)別類(lèi)的scss文件，方便管理和后期維護(hù)。然后在main.scss引入所有的scss樣式片段，使用 sass --watch main.scss:main.css 命令監(jiān)聽(tīng)并將scss文件編譯為css文件。最后在main.js中引入main.css文件。這樣你就可以直接在元素上添加class，然后在scss中暢快寫(xiě)樣式了。
當(dāng)然我們不希望每次手動(dòng)輸入這些命令，初步想法是通過(guò)修改dev命令，：
但是這樣并不能達(dá)到效果，因?yàn)槊看沃粫?huì)啟動(dòng)前一個(gè)命令。于是考慮到使用批處理來(lái)實(shí)現(xiàn)：
將這兩個(gè).bat放在根目錄下，然后配置package.json：
這樣就可以使用 npm run dev 一鍵啟動(dòng) hot reload 和 sass watch了。
總結(jié)
以上所述是小編給大家介紹的vue-cli + sass 的正確打開(kāi)方式圖文詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識(shí)庫(kù)
關(guān)于Vue.js 2.0 的 Vuex 2.0你需要更新的知識(shí)庫(kù)，感興趣的小伙伴們可以參考一下2016-11-11
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue頁(yè)面使用阿里oss上傳功能的實(shí)例(二)
本篇文章主要介紹了vue頁(yè)面使用阿里oss上傳功能的實(shí)例(二)，主要介紹OSS管理控制臺(tái)設(shè)置訪問(wèn)權(quán)限、角色等，有興趣的可以了解一下2017-08-08
詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回)
這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回) ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
element-UI el-table修改input值視圖不更新問(wèn)題
這篇文章主要介紹了element-UI el-table修改input值視圖不更新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選和反選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了vue中封裝組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue.js上下滾動(dòng)加載組件的實(shí)例代碼
本篇文章主要介紹了Vue.js上下滾動(dòng)加載組件的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07