在vue中安裝使用sass的實現(xiàn)方法
更新時間：2023年05月20日 09:08:26 作者：熬夜的卡多希
這篇文章主要介紹了在vue中安裝使用sass的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue安裝使用sass的方法
1.腳手架安裝vue項目
npm install -g vue-cli
2.安裝項目依賴
npm install
3.運行項目
npm run dev
4.安裝sass依賴
npm install --save-dev sass-loader //sass-loader依賴于node-sass npm install --save-dev node-sass
安裝完成如圖所示：
5.在頁面中使用
6.如果頁面中的文字變成紅色，說明已經(jīng)成功配置好sass了
vue安裝使用sass的注意事項
首先是安裝依賴
npm install --save-dev sass-loader //sass-loader依賴于node-sass npm install --save-dev node-sass
但是在安裝2個之后可能會出現(xiàn)報錯
原因: 上面說是因為sass-loader的版本過高導(dǎo)致，因其最新版本為8.0.0，此會導(dǎo)致編譯出錯
解決方法
- 將package.json中的sass-loader的配置修改成低于8.0.0版本，我按照上述鏈接中的版本，修改成7.3.1
- 將安裝的node_modules項目依賴刪除，重新安裝，將sass-loader版本變成7.3.1
- 重新運行項目 npm run dev
- 問題解決，并不會報錯
1、卸載之前安裝的版本
例如運行：
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里面。 一旦配置將會在main.js里引用scss文件時報以下的錯
最后就成功運行了可以在頁面中進行使用了
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
![Vue3配置路由ERROR in [eslint]報錯問題及解決](http://img.jbzj.com/images/xgimg/bcimg0.png)
Vue3配置路由ERROR in [eslint]報錯問題及解決
這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了Vue+Element實現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
下面小編就為大家分享一篇vue獲取當(dāng)前點擊的元素并傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在本篇文章里，小編給大家分享的是關(guān)于Vue關(guān)于組件化開發(fā)知識點詳解內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2020-05-05
這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了Vue+Antv?F2實現(xiàn)混合圖表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
使用mint-ui實現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼
下面小編就為大家分享一篇使用mint-ui實現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue項目netWork地址無法訪問的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vue實現(xiàn)固定位置顯示功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
在頁面進行pdf預(yù)覽的時候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來通過本文給大家介紹vue使用pdf.js來進行pdf預(yù)覽,需要的朋友可以參考下2021-12-12