edk*_*dko 1 uikit reactjs next.js
无法让 uikit 图标出现在我的 next.js React 应用程序中。
我已将链接添加到 _app.js 中的 Head。我尝试过链接到node_modules（这是我保留的css和js文件）以及直接链接到CDN。目前除了图标之外一切都正常。
<Head>
{/** UIkit */}
<link rel="stylesheet" href="/uikit/dist/css/uikit.min.css" />
<script src="/uikit/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/js/uikit-icons.min.js"></script>
</Head>
直接链接时也没有什么区别。
import '../node_modules/uikit/dist/js/uikit-icons.js';
我也尝试过 Webpack 方法，有人说它解决了问题。然而它对我没有任何改变。
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
// loads the Icon plugin
UIkit.use(Icons);
我觉得可能是 Next.js 导致了这个问题。有没有人有过完成这项工作的经验？非常感谢任何提示。
我遇到了类似的问题，但我已经成功地将 UIKit 集成到 NextJs 中。首先我创建了一个 UIKit 组件：
import React, { Component } from "react";
class UIKit extends Component {
state = { ready: false };
componentDidMount = () => {
if (typeof window !== "undefined") {
const uikit = require("uikit");
const icons = require("uikit/dist/js/uikit-icons.min");
uikit.use(icons);
this.setState({ ready: true });
}
};
render() {
return <div>{this.props.children}</div>;
}
}
export default UIKit;
然后我定义了我的自定义_app.tsx：
import React from "react";
import Head from "next/head";
import { AppProps } from "next/app";
import Navbar from "../components/navbar/navbar";
import UIKit from "../components/uikit";
// Global scss
import "../styles/uikit.scss";
import "../styles/global.scss";
export default function App({ Component, pageProps }: AppProps) {
return (
<div>
<Head>
<title>Strapi bloggg</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Staatliches"
/>
</Head>
<UIKit>
<Navbar />
<Component {...pageProps} />
</UIKit>
</div>
);
}
正如您所看到的，该UIKit组件将包裹每个页面上的所有内容。
最后，我制作了一个uikit.scss覆盖默认主题的一些变量的项目。这是导入为import "../styles/uikit.scss";
让我知道它是否有效。