這篇文章主要為大家展示了“在vue-cli搭建的項(xiàng)目中怎么配置sass”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“在vue-cli搭建的項(xiàng)目中怎么配置sass”這篇文章吧。

專注于為中小企業(yè)提供做網(wǎng)站、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)鼓樓免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

關(guān)于在vue-cli搭建的項(xiàng)目中怎么配置sass，網(wǎng)上搜到的基本是這種答案：

但是我認(rèn)為，直接將樣式寫在每個(gè)單文件的<style>里，是十分不明智的做法。且不說node-sass安裝過程的各種坑，內(nèi)嵌的<style>也讓組件顯得十分混亂。想象一下你在修改某個(gè)methods時(shí)必須拖動(dòng)滾輪穿越幾十上百行的css代碼，又或者為了修改一組樣式，卻找不到對應(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了。

以上是“在vue-cli搭建的項(xiàng)目中怎么配置sass”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：在vue-cli搭建的項(xiàng)目中怎么配置sass
文章起源：http://chinadenli.net/article12/gdoogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、外貿(mào)建站、云服務(wù)器、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)