第一步 安裝scss依賴,cnpm i node-sass sass-loader -D 註:sass-loader用來解析scss文件(-D 是 --save-dev 的簡寫) 第二步: 在build文件夾下的webpack.base.conf.js的rules裡面添加配置 { test: /\. ...
第一步
安裝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
項目啟動成功,編譯報錯問題解決