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

Question

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

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

Answer 1

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

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

Answer 2

通过将名称从(例如) CSS模块更改为public.module.css，将导入转换为public.module.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中应用css编译器的sass/scss文件可能会导致styled-jsx的出现。您可以尝试使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}</>
};