你越是认真生活,你的生活就会越美好
——弗兰克·劳埃德·莱特
《人生果实》经典语录
问题
通过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
先卸载已经安装的sass-loader
cnpm uninstall sass-loader
重新安装指定版本的sass-loader
cnpm i sass-loader@10.1.0 --save-dev
// 或者
cnpm i sass-loader@10.1.0 -D
重新跑项目
问题解决
推荐阅读
谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强
转载:https://blog.csdn.net/weixin_42752574/article/details/115816585
查看评论