在小程序中适配通用符*

在微信小程序的 WXSS 中使用 * 通配符选择器
题外话：近期在使用框架写小程序，刚看了几页 wepy 框架的文档，美团的 mpvue 便闪耀登场，如此精彩的框架，马上上手用。

前端开发中必然要使用 * 通配符选择器，例如全局应用 box-sizing 盒模型：

* {
    box-sizing: border-box;
}

然而小程序竟不支持这一现代网页开发必备属性，更可气的是，直接对小程序的元素（view、label 等）应用该属性是无效的，这也就断了手工穷举的可能，毕竟我们不可能不厌其烦地对每一个 .class {} 选择器加这个属性，那样会很累并且不利于长久维护。经过查询，微信小程序的官方问答中心也有人遇到了相同问题。

幸运的是 mpvue 的 Quick Start 模版使用了 webpack，并默认启用了 PostCSS 插件，翻遍 PostCSS 插件目录后，终于找到了一款合适的插件，能够模拟 * 的效果：postcss-autoreset。

其使用方法也异常简单，在项目根目录的 .postcs-s-rc.js 中，插入 postcss-autoreset 相关配置即可：

module.exports = {
  "plugins": {
    // 添加 postcss-autoreset 设置
    // Add postcss-autoreset configs
    "postcss-autoreset": {
      reset: {
        // 这里的声明会应用于所有 WXSS 选择器
        // Styles apply to all WXSS selectors
        boxSizing: "border-box",
      },
    },
    "autoprefixer": {},
    "postcss-mpvue-wxss": {},
  }
};

经过构建编译，插件会将所有 .class {} 选择器抽离出一份置于 .wxss 文件顶部，并插入我们配置的 CSS 属性声明。

另外该插件还支持识别并忽略伪类和 BEM 的修饰（modifier）选择器，可以说是开箱即用了，详见文档。

经过这番配置，虽然繁琐，但达成了 CSS * 的效果。

注意

以上方法不会对 ::before 和 ::after 生效，因此目前只能手动写进去，具体解决方法有待评