vue中使用sass 及 vue中node-sass 和 sass-loader 不兼容的问题

最新推荐文章于 2024-04-16 15:54:51 发布

原创最新推荐文章于 2024-04-16 15:54:51 发布 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文记录了解决Vue项目中使用Sass样式时遇到的错误。通过调整sass-loader版本至7.3.1，成功解决了Module build failed问题，使Sass在Vue中正常工作。

最近在学习vue框架，想在vue中使用sass写样式，但在vue中安装的node-sass 和 sass-loader后，在style中写样式总是报错。
下面是我对这个问题的一点记录

在vue中使用sass写css代码，我们需要在vue的style样式上添加一些样式

<style scoped lang="scss">  // 添加一个属性 lang="scss"
	.main{
		background-color: #00FFFF;
		/* height: 100%; */
		span{
			font-size: 30px;
		}
	}
</style>

这是运行会发现报错
Failed to resolve loader: sass-loader

说是没有sass-loader
那我们安装呗 cnpm install sass-loader -D

这是会报错
Module build failed (from ./node_modules/_sass-loader@8.0.0@sass-loader/dist/cjs.js):
Error: Cannot find module ‘node-sass’

那我们也安装一个 cnpm install node-sass -D

如果这是用最新版的vue搭建脚手架 @vue/cli 这时你的sass样式应该可以用了，

但是。如果你用你不是最新的脚手架搭建工具
也可能还是会报错

Module build failed: TypeError: this.getResolve is not a function
at Object.loader (C:\Users\zhanliang\Desktop\vue-Demo\vuedemo1\app\node_modules_sass-loader@8.0.0@sass-loader\dist\index.js:52:26)

这是node-sass 和 sass-loader 不兼容造成的
在这里插入图片描述
解决的方式就是把sass-loader 的版本换位成7.3.1
你可以一开始安装sass-loader 的时候就安装7.3.1 版本