我正在努力将传统应用程序移动到Nextjs。该应用程序有两种布局:public和管理部分。每个布局都有自己的css文件。由于nextjs的限制,当你只能在自定义_app.js文件中导入css时,我不能拆分布局。我不想包括管理css公共布局,反之亦然。在这种情况下我能做什么?
我试图使用styled-jsx
,但它带来了更多的问题。我不能用css.globe``
包装整个css文件,因为有很多错误,如we don't support nesting
等。
您可以将文件放在/public文件夹中,然后手动管理css。手动管理包含的样式的一个好地方是custom_document。jsx页面。
请注意,接下来要做的是这样做。这些文件不会与其他css文件捆绑在一起。它们也将通过url提供给公众。
通过将名称从"public.css
"更改为"public.module.css
"来转换为CSS模块。
然后将其作为对象导入。
import styles from 'path-to/public.module.css'
并与className属性一起使用。
<div className={styles.whatever}></div>
注意,public.module.css
的内容只是库存CSS。
.whatever { /*...*/ }
你可以对三元格式应用条件样式。
<div className={someBoolean ? styles.whatever : ''}>
您可以使用dynamic
定义两个布局组件,然后在_app.js
中切换它们。本文展示了dynamic
的特性。
另一方面,we don't support nesting
可能是由于在styled-jsx
中应用css
编译器的sass/scss
文件造成的。你可以尝试让styled-jsx
支持sass/scss功能。
_app.js
const App = ({ Component, pageProps }) => {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
Layout.js
import dynamic from 'next/dynamic';
const mapLayoutToComponent = {
public: dynamic(import("./layouts/Public")),
admin: dynamic(import("./layouts/Admin"))
}
const Layout = props => {
const [layoutState, setLayoutState] = React.useState('public');
const Component = mapLayoutNameToComponent[layoutState];
return <Component>{props.children}</Component>
}
布局/Public.js
import '../styles/public.css';
const Public = (props) => {
return <>{props.children}</>
};
布局/Admin.js
import '../styles/admin.css';
const Admin = (props) => {
return <>{props.children}</>
};