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