javascript - (S)CSS 中的 JS Sapper + Bulma 断点

Question

我正在尝试将 Sapper 与 Bulma 和 (S)CSS 一起使用。

我的目标是在 src/routes/layout.html 内部的“main”上应用各种填充，在桌面设备上使用填充，而在移动设备上不使用（或较小的）。

使用预定义的断点或 mixins 对我来说不能正常工作，因为以下代码会引发 SCSS 错误：

编辑：这是苗条的组件：

<script>
    import 'bulma/css/bulma.css' 
    // or import 'bulma/bulma.sass' ???
</script>
<style type="text/scss">
main {
  position: relative;
  max-width: 56em;
  background-color: white;
  margin: 0 auto;
  sizing: border-box;
  padding: 0.5em;

  +desktop-only {
    padding: 2em;
  }
}
</style>

出了什么问题以及如何解决？

标签： javascriptcsssassbulmasapper