与 Gatsby 和 Bulma 反应 - 列不水平

Question

我是 Bulma 的新手，我只是从教程中复制和粘贴，但是我无法获得水平列。

<Fragment>
          <Level mobile renderAs="nav">
            <Level.Item textAlignment="centered">
              <div>
                <p className="heading">tweets</p>
                <Heading renderAs="p">3,456</Heading>
              </div>
            </Level.Item>
            <Level.Item textAlignment="centered">
              <div>
                <p className="heading">following</p>
                <Heading renderAs="p">123</Heading>
              </div>
            </Level.Item>
            <Level.Item textAlignment="centered">
              <div>
                <p className="heading">followers</p>
                <Heading renderAs="p">456K</Heading>
              </div>
            </Level.Item>
            <Level.Item textAlignment="centered">
              <div>
                <p className="heading">likes</p>
                <Heading renderAs="p">789</Heading>
              </div>
            </Level.Item>
          </Level>
        </Fragment>

我只是把它放到一个片段中。它应该工作，但它没有。任何的想法？ 谢谢

Answer 1

正如Gatsby's documentation for Bulma 所示：

首先，让我们安装我们将要安装的所有必需的软件包 需要。 yarn add bulma node-sass gatsby-plugin-sass

然后将 gatsby-plugin-sass 添加到 gatsby-config.js。

您需要添加并启用gatsby-plugin-sass。安装包和依赖项后，将以下行添加到您的 gatsby-config.js：

plugins: [`gatsby-plugin-sass`],

资源：

• https://bulma.io/documentation/customize/with-node-sass/
• https://www.gatsbyjs.org/docs/bulma/