React with 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所示：

For starters, lets install all the required packages we’re going to need. yarn add bulma node-sass gatsby-plugin-sass

Then add the gatsby-plugin-sass in to gatsby-config.js.

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

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

资源：

React with Gatsby 和 Bulma - 列不是水平的

React with Gatsby and Bulma - Columns are not horizontal

reactjs

gatsby

bulma