快速开始

把 PreCSS 加入 MoonBit 项目，用几行代码编译第一段样式

MOONBIT · DEVELOPER QUICKSTART

在 MoonBit 项目里使用 PreCSS

PreCSS 是库，不是框架：它只负责把 SCSS、SASS、LESS 或 CSS 源码编译成 CSS。

安装

在项目目录添加 Mooncakes 依赖：

moon add conglinyizhi/precss

核心公开 API 的包别名是 @precss。

编译一段样式

显式选择 SCSS 入口，得到 CSS 字符串：

let css = @precss.compile_scss(".card { color: #7c3aed; }")

构建脚本或服务端可以保存这个字符串，交给页面或静态资源使用。

Rabbita（可选集成）

PreCSS 是库：它不规定页面如何组织。Rabbita 是可选的 UI / SSR 集成环境；使用 Rabbita 时，可以在构建期或服务端调用 @precss.compile_scss 生成 CSS，再注入 `<style>` 标签或写入静态资源。

let css = @precss.compile_scss(".card { color: #7c3aed; }")

fn page_component(css : String) -> @rabbita.Val[@html.Html] {
  let (state, _emit) = @rabbita.create_pure_state(
    css,
    update=fn(model, _msg) { model },
  )
  state.view(css => @html.html([
    @html.node("head", @html.Attrs::build(), [
      @html.node("style", @html.Attrs::build(), [@html.text(css)]),
    ]),
    @html.node("body", @html.Attrs::build(), []),
  ]))
}

async fn render_page(css : String) -> String {
  let page = @rabbita.new(fn() { page_component(css) })
  page.render(url="http://127.0.0.1/", timeout=5000)
}

如果不想内联，也可以在构建期把 css 写入静态文件，再由 Rabbita 页面用普通的 stylesheet 链接加载；Rabbita 不是 PreCSS 的必需依赖。

支持 SCSS · SASS · LESS · CSS