样式文件处理

Anka 默认支持 PostCSS 和 Sass。所以，我们能将 src/pages/home/home.wxss 改为 src/pages/home/home.css，并且在里面引入其他的 css 文件。需要区别的是，这里有两种引入方式：

  • @import "./_var.css";
  • @wximport "./sub.css";

须知@import 语句必须 前置，其次是 @wximport。当使用 @import 时，文件会在编译时被引入，但是当使用 @wximport 时，文件并不会被合并，最终表现是：@wximport 转为微信 wxss 的 @import 语法。

  1. /* pages/test/test.scss */
  2. $color: red;
  3. page {
  4.   color: $color;
  5. }
  1. /* pages/test/test.css */
  2. @import "./_var.css";
  4. /* sub.css 不会编译到 test.css 文件中 */
  5. @wximport "./sub.css";
  7. page {
  8.   color: var(--font);
  9.   height: 100%;
  10.   width: 100%;
  11. }

Dev 模式下最终会变成:

  1. /* pages/test/test.wxss */
  2. page {
  3.   color: red;
  4. }
  1. /* pages/test/test.swxs */
  2. /* sub.css 不会编译到 test.css 文件中 */
  3. @import "./sub.css";
  5. page {
  6.   color: red;
  7.   height: 100%;
  8.   width: 100%;
  9. }