EasySass: could not generate CSS file. See Output panel for details.微信小程序报错及解决

解决微信小程序导入vscode的easysass包报错

问题发现

  • 当我喜滋滋的在vscode中导入easysass包之后,又在微信小程序中添加vscode扩展,又去文件中改好了配置文件后却直接弹出了一个报错,真是令人猝不及防,那么让我来带领大家解决它吧。

问题来源和解决

  • 可能1:如果你之前用都没有问题,并且这次也是正常操作的话,首先你要检查有没有粗心的把文件后缀写为.sass,如下,如果写错,就会提示这个问题,把文件后缀改正为scss就解决了。
  • 可能2:你之前没有用过微信小程序+vscode+easysass的组合,配置完成之后可以正常编译为wxss文件,但就是 一直弹出报错,那么你很有可能是打开了自动保存。因为这样他就会实时的检查你保存文件的问题并编译为wxss文件,可你的文件只写了一半还存在语法错误,但easysass无法完成编译就会弹出弹窗。这时你只能去选择关闭自动保存来解决问题。
  • 关闭自动保存:点击文件->点击自动报错。就可以了。
  • 如果你在遇见弹窗的时候足够细心就会发现在调试起的【输出】会输出报错,它提示在"...ckground: pink;后应该是【}】而不是一个【.】,但这是我们代码的中间状态,正常情况不会报错,这时候报错只有一个原因,他自动进行了保存,这就是要关闭自动保存的原因
python 复制代码
Error: Invalid CSS after "...ckground: pink;": expected "}", was "."
        on line 2 of sass/d:\24.1.10微信小程序\demo002\pages\index\index.scss
>>     background: pink;
   ----------------------^
  • 可能3:忘记更改easysass的配置文件,这时需要点开微信小程序->点击编辑->点击最下面的打开编辑器扩展目录,选择带有easysass的文件夹,我的是【spook.easysass-0.0.6】,再选择.json结尾的文件,把"easysass.formats"部分【大致在30-40行】改为如下就可以了,把css改为wxss,并删除下面一部分。
python 复制代码
"easysass.formats": {
					"type": "array",
					"default": [
						{
							"format": "expanded",
							"extension": ".wxss"
						}
					],
					"description": "Define format(s) for outputted css files. Use \"nested\", \"expanded\", \"compact\" or \"compressed\" as a format."
				},
  • 可能4:就是你的插件和easysass发生了冲突,这时候你只能两害取其轻了,删除一个不那么重要的插件来维持正常使用

制作不易,感谢三联,谢谢大家啦

相关推荐
多客:duokelijie8 小时前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
用户34346127832010 小时前
用户认证系统在高并发下的幂等性与限流策略踩坑实录
css
计算机毕设定制辅导-无忧学长2 天前
《基于微信小程序健康习惯激励系统设计与实现》
java·spring boot·mysql·微信小程序·uniapp·健康习惯激励系统
啾咪orJIUMI2 天前
Vue 3 + SCSS 实现全屏系统门户:五栏展开与灯光联动
css
htzyl2062 天前
前端阶梯——第四十三章、实战二:待办清单To-Do
前端·javascript·html
程序员大阳2 天前
HTML+CSS+JS对话式实战(1)-开篇:认识我们要做的社团活动发布平台
javascript·css·html·实战·系统·平台·社团活动发布
一支蜉蝣2 天前
Day26 XD安全学习笔记--PHP 应用&模版引用&Smarty渲染&MVC 模型&数据联动&RCE 安全
笔记·网络安全·html·php
用户298698530142 天前
Python 将 Markdown 批量转为 HTML:单文件与目录遍历两种实现
python·html·markdown
钱栈up2 天前
热榜上手|HyperFrames:写HTML出MP4
前端·html
幸运小猿2 天前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html