uni-app项目中使用scss语法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/eadio/article/details/87284921

最近正在学习uni-app开发,我先把文档浅略翻了遍。发现组件和接口几乎都是按照微信小程序走,但是视图层上的语法又是按照vue的语法走的。所以开发过程一定要注意这点。

然后我想在uni-app项目中使用scss语法。但是具体怎么安装呢?历经曲曲折折的道路,终于实现了。下面是我的安装过程,有相同错误的可以参考下!

我的win7 64位系统,我的开发工具是HbuilderX。

1、最简单的方法如下:

点击菜单栏中的“工具 – 插件安装 – scss/sass编译” 点击安装,如果成功了,就可以正常使用了。

很不幸的是,我的提示失败了
在这里插入图片描述

2、我又找到D:\HBuilderX\plugins\compile-node-sass插件目录,执行npm install,仍然提示失败:

在这里插入图片描述
然后我去社区提问了,经提示查看了错误日志,显示了一大堆错误,还是不知道如何解决:
在这里插入图片描述
然后,我去百度找答案了。。。
出来的都是node-sass安装错误流程,大多是说npm安装不成功的可以使用cnpm淘宝滤镜。
最后抱着试试的心理,一步一步尝试下来,竟然成功了!!

3、安装node-sass流程

3-1、先下载python,然后设置环境变量。附上安装步骤地址【http://www.runoob.com/python/python-install.html】

3-2、安装cnpm。附上安装步骤地址【http://npm.taobao.org/】

3-3、再次进入D:\HBuilderX\plugins\compile-node-sass插件目录,执行cnpm install,可喜可贺,终于安装成功了!

然后,启动我们的项目,给style标签添加lang=“scss”,启动“运行到浏览器”。发现又报了如下错误,悲剧!
在这里插入图片描述

然后,继续到社区上搜索答案。附上地址【http://ask.dcloud.net.cn/question/63952】

4、具体做法如下:

按照控制台提示操作。

4-1、运行cmd,
4-2、然后执行控制台的mkdir命令

然后没有curl的朋友请跟着我这么做。

4-3、进入到刚刚mkdir创建的目录
4-4、从node-sass github官方下载下来,然后,然后,重点是先将下载的文件重命名为“binding.node”。然后在拷贝文件到刚刚mkdir创建的目录。

下载地址:https://github.com/sass/node-sass/releases/download/v4.11.0/win32-ia32-57_binding.node

最后,重启项目,提示编译成功啦,可喜可贺!!!
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/eadio/article/details/87284921