NextJS中的多个布局或有条件的css导入

Question

我正在努力将传统应用程序移动到Nextjs。该应用程序有两种布局:public和管理部分。每个布局都有自己的css文件。由于nextjs的限制，当你只能在自定义_app.js文件中导入css时，我不能拆分布局。我不想包括管理css公共布局，反之亦然。在这种情况下我能做什么?

我试图使用styled-jsx，但它带来了更多的问题。我不能用css.globe``包装整个css文件，因为有很多错误，如we don't support nesting等。

Answer 1

您可以将文件放在/public文件夹中，然后手动管理css。手动管理包含的样式的一个好地方是custom_document。jsx页面。

请注意，接下来要做的是这样做。这些文件不会与其他css文件捆绑在一起。它们也将通过url提供给公众。

Answer 2

通过将名称从"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 : ''}>

Answer 3

您可以使用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}</>
};