如何为Next.js安装语义用户界面_Next.js_Semantic Ui

如何为Next.js安装语义用户界面

next.js

如何为Next.js安装语义用户界面,next.js,semantic-ui,Next.js,Semantic Ui,我这里有一个问题，解决不了。我想通过npm在Next.js应用程序上安装语义ui，但这是不可能的，请帮助我如果你有一些想法，请帮助我 npm install semantic-ui 我尝试了这个，但没有任何改变。我在下一个.js项目中使用了语义ui react，我喜欢使用自己的主题。按照下面的说明开始首先运行npm安装--保存dev语义ui。很快，您将看到一个交互式提示。回答以下问题设置语义UI—选择“Express（设置组件和输出文件夹）” 我们检测到您正在使用NPM Nice！这是

我这里有一个问题，解决不了。我想通过npm在Next.js应用程序上安装语义ui，但这是不可能的，请帮助我

如果你有一些想法，请帮助我

npm install semantic-ui

我尝试了这个，但没有任何改变。

我在下一个.js项目中使用了语义ui react，我喜欢使用自己的主题。按照下面的说明开始

首先运行

npm安装--保存dev语义ui

。很快，您将看到一个交互式提示。回答以下问题

设置语义UI—选择“Express（设置组件和输出文件夹）”

我们检测到您正在使用NPM Nice！这是您的项目文件夹吗？-选择“是”

我们应该将语义UI放在项目中的什么位置点击返回（这将在根目录中放置一个名为“semantic”的目录）

我们应该在包中包含哪些组件这取决于您。选中需要的，取消选中不需要的。

我们应该设置输出文件的权限吗选择“否”

您是否使用RTL（从右到左）语言选择您最喜欢的选项

我们应该在哪里输出语义UI在终端中编写自定义路径

。/static/semantic/dist

现在我们需要gulp来运行编译任务，以便在dist/目录下构建您将在项目中使用的theme.css

运行

纱线添加--dev-gulp

并将以下内容添加到“scripts”下的package.json中，如下所示

{
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "scripts": {
    "dev": "next",
    "build-semantic": "cd semantic && gulp build-css build-assets”,
    "watch-semantic": "cd semantic && yarn run build-semantic && gulp watch"
  },
  "devDependencies": {
    "semantic-ui": "^2.4.2"
  }
}

现在，如果运行

swean watch semantic

，gulp将编译源文件并在

semantic/

下创建一个

dist/

。在dist/下，您将看到semantic.min.css 我们就要结束了。现在您必须在所有页面或组件共享的页面/组件中包含这个.css。幸运的是，next.js有一个解决方案

_document.js（）

在pages/下创建_document.js，并包括最近创建的semantic.min.css，如下所示

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <html>
        <Head>
          <link
            href="/static/semantic/dist/semantic.min.css"
            rel="stylesheet"
          />
        </Head>
        <body className="custom_class">
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

从'next/Document'导入文档，{Head，Main，NextScript}
导出默认类MyDocument扩展文档{
静态异步getInitialProps（ctx）{
const initialProps=wait Document.getInitialProps（ctx）
返回{…initialProps}
}
render（）{
返回(
)
}
}

如果您想在app.js中执行以下操作：

import 'semantic-ui-css/semantic.min.css'

您将需要：

然后，你可以遵循我在这里找到的建议：。

具体来说，请参见antonioOrtiz 3月24日的评论。

有一个不错的入门项目，它使用Next.js+Fomantic UI+样式化组件

对于语义用户界面版本，请查看

v1.1.0

branch

我还没有看到评论中提到的另一种选择：在页面周围创建一个布局包装器，并从CDN中导入库CSS

从“下一个/Head”导入Head；
常量布局=（）=>(
{儿童}
);
导出默认布局；

在您的页面中：

从'@components/Layout'导入布局；
const AboutPage=（）=>(
我是关于页面的
);
导出默认值约为页；

它将允许在不安装任何附加软件包的情况下进行一些快速测试。

您从npm获得了什么输出？当我尝试在文件顶部导入语义时，我得到了这个（我在帖子中上传了照片）。您能将图像中的错误放入您的问题中吗？图像中的文本不可搜索，从而减少了有人帮助回答您问题的机会。