当前位置: 首页 > Web前端 > CSS

vue中使用sass遇到的坑

时间:2023-03-30 17:47:14 CSS

.hello{p{在页面颜色:红色的;}}打开当前项目中的命令板,执行以下命令npminstallnode-sasssass-loaderstyle-loader--save-devbuild文件夹webpack.base.conf.js中添加配置module{test:/\.sass$/,loaders:['style','css','sass']}下的规则,使用.hello{p{在页面颜色:红色的;}}==Vue项目使用scss报错==Modulebuildfailed:TypeError:this.getResolveisnotafunction原因:sass版本太高,导致编译webpack时出错,以及此时需要卸载当前版本可以重新安装低版本。(可以在package.json文件中搜索sass-loader查看当前版本,目前8.0.0版本会报错,7.3.1版本可以正常运行)卸载:npmuninstallsass-loader安装低版本:npminstallsass-loader@7.3.1--save-dev==vue项目使用scss又报错==错误:NodeSassversion5.0.0isincompatiblewith^4.0.0原因:node-sass版本太高,降为4.x卸载npmuninstallnode-sass安装npminstallnode-sass@4.14.1重新运行OK!还有一种情况:运行项目npmrundevterminal显示错误,如下:ERRORFailedtocompilewith1errorserrorin./src/components/XzHeader.vueReason:Sasssyntaxdoes不要使用大括号和分号。然后,您只需将lang="sass"更改为lang="scss"。