在vue中安裝使用sass的實(shí)現(xiàn)方法
vue安裝使用sass的方法
1.腳手架安裝vue項(xiàng)目
npm install -g vue-cli
2.安裝項(xiàng)目依賴(lài)
npm install
3.運(yùn)行項(xiàng)目
npm run dev
4.安裝sass依賴(lài)
npm install --save-dev sass-loader //sass-loader依賴(lài)于node-sass npm install --save-dev node-sass
安裝完成如圖所示：
5.在頁(yè)面中使用
6.如果頁(yè)面中的文字變成紅色，說(shuō)明已經(jīng)成功配置好sass了
vue安裝使用sass的注意事項(xiàng)
首先是安裝依賴(lài)
npm install --save-dev sass-loader //sass-loader依賴(lài)于node-sass npm install --save-dev node-sass
但是在安裝2個(gè)之后可能會(huì)出現(xiàn)報(bào)錯(cuò)
原因: 上面說(shuō)是因?yàn)閟ass-loader的版本過(guò)高導(dǎo)致，因其最新版本為8.0.0，此會(huì)導(dǎo)致編譯出錯(cuò)
解決方法
- 將package.json中的sass-loader的配置修改成低于8.0.0版本，我按照上述鏈接中的版本，修改成7.3.1
- 將安裝的node_modules項(xiàng)目依賴(lài)刪除，重新安裝，將sass-loader版本變成7.3.1
- 重新運(yùn)行項(xiàng)目 npm run dev
- 問(wèn)題解決，并不會(huì)報(bào)錯(cuò)
1、卸載之前安裝的版本
例如運(yùn)行：
npm uninstall sass-loader
2、重新安裝指定的sass-loader版本
npm install sass-loader@7.3.1
3、如果還是安裝不成功的話，或者安裝太慢連接不上，使用一下淘寶鏡像后重復(fù)1,2步驟，成功后再npm install
使用淘寶鏡像：npm config set registry https://registry.npm.taobao.org
然后再執(zhí)行命令
cnpm install node-sass --save-dev cnpm install sass-loader --save-dev
第二步：切記不需要在webpack.base.config.js中去配置了loader了， 主要原因是新版本的vue-cli已經(jīng)幫我們把sass-loader配置好了，放在了util.js里面。 一旦配置將會(huì)在main.js里引用scss文件時(shí)報(bào)以下的錯(cuò)
最后就成功運(yùn)行了可以在頁(yè)面中進(jìn)行使用了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element實(shí)現(xiàn)圖片上傳及裁剪功能
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)圖片上傳及裁剪功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue組件之間相互傳值的方式，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
vue.config.js中配置分包策略及常見(jiàn)的配置選項(xiàng)
在Vue.js中分包（Code Splitting）是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時(shí)按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見(jiàn)的配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-02-02
在Vue項(xiàng)目和微信小程序中生成二維碼和條形碼是一個(gè)常見(jiàn)的需求,主要用于分享、產(chǎn)品識(shí)別等場(chǎng)景,這篇文章主要給大家介紹了關(guān)于使用Vue3生成二維碼和條形碼的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue?el-pagination分頁(yè)查詢(xún)封裝的示例代碼
本文主要介紹了vue?el-pagination分頁(yè)查詢(xún)封裝的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
本文主要介紹了Vue3 computed的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-08-08
Vue3實(shí)現(xiàn)markdown-it支持chartjs、Echartjs、mermaid的渲染(附實(shí)例代碼)
markdown-it-vue使用markdown-it作為Markdown數(shù)據(jù)解析引擎,整合多種markdown-it插件,并內(nèi)置了一些自己的功能性插件,這篇文章主要介紹了Vue3實(shí)現(xiàn)markdown-it支持chartjs、Echartjs、mermaid渲染的相關(guān)資料,需要的朋友可以參考下2025-08-08
vue 2.0項(xiàng)目中如何引入element-ui詳解
element-ui是一個(gè)比較完善的UI庫(kù),但是使用它需要有一點(diǎn)vue的基礎(chǔ)，下面這篇文章主要給大家介紹了關(guān)于在vue 2.0項(xiàng)目中如何引入element-ui的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
Vue 組件事件觸發(fā)和監(jiān)聽(tīng)實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue 組件事件觸發(fā)和監(jiān)聽(tīng)實(shí)現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
vue3+vite+ts使用require.context問(wèn)題
這篇文章主要介紹了vue3+vite+ts使用require.context問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05