vue 安装sass,运行后报错loaderContext.ge
2020-07-15 本文已影响0人
Domino_2018
今天自己搭建vue-cli框架,安装了element-ui,运行没有任何问题,修改了下样式,为了避免修改ele里面组件的样式出现样式污染,想着装个sass写嵌套的,这样既方便又能很好的解决问题,那么动起来:
1.安装需要的依赖:
npm install node-sass --save-dev //安装node-sass
npm install sass-loader --save-dev //安装依赖包sass-loader
npm install style-loader --save-dev //安装style-loader
2.在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
},
3.然后在用到的页面内添加:
<style scoped lang="scss">
</style>
三个操作执行完毕,npm run dev 跑起来,无情报错 loaderContext.getResolve is not a function。
百度后发现,是因为安装的sass loader版本太高,降低版本即可,解决方案有两个:
1.找到项目的package.json文件,将里面的 "sass-loader"的版本更换掉 。
"sass-loader": "^8.0.0",更换成了 "sass-loader": "^7.3.1",
注意这里需要将loader版本降低到8.0一下即可
PS:
新手特别需要注意,这里更换版本后,node_modules文件夹内loader版本并没有更改,需要删除掉node_modules,重新进行npm install下载依赖,才算是解决问题了。
2.命令行解决:
npm uninstall sass-loader //卸载当前版本
npm install sass-loader@7.3.1 --save-dev //安装低版本
欧啦