Vue项目安装Sass出现 Syntax Error: TypeError: this.getOptions is not a function

最新推荐文章于 2024-03-22 10:14:45 发布

陈坚泓

最新推荐文章于 2024-03-22 10:14:45 发布

阅读量7.1k

点赞数 1

分类专栏： Vue 文章标签： sass

本文链接：https://blog.csdn.net/weixin_42752574/article/details/115816585

版权

63 篇文章 28 订阅

订阅专栏

你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

通过vue-cli脚手架的vue create命令创建了项目，想在项目中使用sass预处理器，通过vue cli官网如下介绍

Vue CLI 项目天生支持PostCSS、CSS Modules 和包含 Sass、Less、Stylus在内的预处理器。

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

在这里插入图片描述
然后你就可以导入相应的文件类型，或在*.vue 文件中这样来使用：

<style lang="scss">
	$color: red;
</style>

npm run serve启动项目后报错如下

error  in ./src/App.vue?vue&type=style&index=0&lang=scss&
Syntax Error: TypeError: this.getOptions is not a function

在这里插入图片描述

上述错误的原因是sass-loader 版本过高，版本^11.0.1
在这里插入图片描述

cnpm uninstall sass-loader

在这里插入图片描述

cnpm i sass-loader@10.1.0 --save-dev
// 或者
cnpm i sass-loader@10.1.0 -D

在这里插入图片描述

在这里插入图片描述
问题解决

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起变得更强

关注