我这里有一个问题，无法解决。我想通过 npm 在 Next.js 应用程序上安装 Semantic ui，但这是不可能的，请帮助我。
如果你有什么想法请帮助我
npm install semantic-ui
我尝试了这个，但没有任何变化。
最佳答案
我在 next.js 项目中使用 Semantic-ui-react，并且我喜欢使用自己的主题。请按照以下说明开始操作。
首先运行npm install --save-dev语义-ui。很快您就会看到交互式提示。按以下方式回答问题。
- 设置语义 UI - 选择“Express(设置组件和输出文件夹)”
- 我们检测到您正在使用 NPM 很好!这是你的项目文件夹吗？ - 选择"is"
- 我们应该将语义 UI 放在项目中的什么位置？ 按回车键(这将在根目录中放置一个名为“semantic”的目录)
- 我们应该在包中包含哪些组件？ 这取决于你。选中您需要的，取消选中不需要的。
- 我们应该对输出文件设置权限吗？ 选择“否”
- 您使用 RTL(从右到左)语言吗？ 选择您最喜欢的选项
- 我们应该在哪里输出语义 UI？ 在终端中编写自定义路径
../static/semantic/dist- 我们应该在哪里输出语义 UI？ 在终端中编写自定义路径
现在我们需要 gulp 来运行编译任务，以在 dist/目录下构建您将在项目中使用的 theme.css。
运行yarn add --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"
}
}
现在，如果您运行yarn watch-semantic，gulp将编译源文件并在semantic/下创建一个dist/。在 dist/下你会看到semantic.min.css
我们即将完成。现在您必须将此 .css 包含在所有页面或组件共享的页面/组件中。幸运的是，next.js 有一个解决方案。
_document.js (https://nextjs.org/docs/#custom-document)
在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.js - 如何安装 Next.js 的 Semantic ui，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53711075/