vue中使用scss


第一步

安裝scss依賴,cnpm i node-sass sass-loader -D

注:sass-loader用來解析scss文件(-D 是 --save-dev 的簡寫)

第二步:

在build文件夾下的webpack.base.conf.js的rules里面添加配置

{

test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
 
第三步:

scss使用測試:如下測試修改字體顏色

 <style lang="scss">

$color:red;
div {color:$color;}
</style>
 

安裝完成后,運行時出現了錯誤

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

這是因為當前sass的版本太高,webpack編譯時出現了錯誤,只需要換成低版本的就行,下面說一下修改方法,

找到package.json文件,里面的 "sass-loader"的版本更換掉 就行了。

安裝的sass-loader的版本為最新8.0.0 改成如下即可

 

"sass-loader": "^7.3.1"

 

然后重新安裝項目依賴

在終端執行 npm i

之后啟動項目 npm run dev

項目啟動成功,編譯報錯問題解決

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM