最近由于工作需要开始学习微信小程序，但是刚上来就被一个简单的问题卡住，甚是头疼。最终发现是wxss格式问题，在此记录，以便大家参考

首先我想实现以下样式：

image.png

并编写了以下代码：

# wxml
<text>pages/classic/classic.wxml</text>
<view class="chunk color1"></view>
<view class="chunk color2"></view>
<view class="chunk color3"></view>

# wxss
/* pages/classic/classic.wxss */


.chunk{
    width: 100px;
    height: 100px;
}

.color1{
    background-color: aqua;
}

.color2{
    background-color: brown;
}

.color3{
    background-color: coral;
}

但是最终显示的样子始终是空白页面

就在我写这篇文章的时候我以为原因是因为wxss文件样式代码上没留空白行，后来发现是我

没保存wxss代码

特地在此提醒用习惯了idea、pycharm的朋友，注意保存代码

打扰了，谢谢

-----------------------------分割线 --------------------------------

补充：

我觉得微信小程序官方的编辑器太垃圾，我使用的是vsCode，通过插件支持小程序开发的代码提示、语法高亮等等
具体教程请查看：https://www.jianshu.com/p/cc10c25bf3e4

关于以上的问题我们可以开启自动保存功能，开发才流畅：

方法：

在设置页面搜索：Auto Save

然后修改为以下配置即可

image.png