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