Next.js中每页的CSS拆分

Question

我需要我的样式表分成许多文件，每个Next.js页面一个。如何实现这个目标？

我尝试使用next-css，只是在每个页面中导入一个css文件。它几乎起作用了。但是，css-file不会在链接导航中加载。Next的作者说它没有实现：https://github.com/zeit/next-plugins/issues/282#issuecomment-523128645

我也尝试过使用styled-jsx。它对我来说有几个问题。它的问题页面上有很多bug。我也没能用这种方法使样式在整个子组件中都可见。

Answer 1

您可以导入module.css (import style from 'root/styles/MyStyle.module.css)并使用，如下所示。

这是您的组件：

import style from '../../styles/components/Header.module.css'

export default function Header() {
    return (
        <h1 className={style.header}>
            Hello World
        </h1>
    );
}

这是您的CSS：

.header{
    color: #fff;
    width: 100%;
    height: 80px;
}

请注意，CSS类用作组件className；

或者，在react组件中，您可以尝试添加标记<style jsx>{ your_CSS_here }</style>。

根据Next文档，每个页面都使用styled-jsx库。但是您仍然可以使用其他CSS-in-JS库，如Styled Components和Emotion。

Next应用程序还支持使用允许您导入.css和.scss文件的sass。

有关更多信息，请查看Vercel Docs。我还建议你检查一下Learning area。

Answer 2

您可以创建单独的css文件，并在需要特定样式的每个组件上导入该组件唯一的css文件。例如，假设您在文件file1.js中有一个组件，然后您可以在文件file1.css中导入特定于此组件的样式，这与使用css file2.css导入另一个文件file2中的样式相同

import './file1.css'; //importing the style specific only for this component
function File1(){
      const [processing, setProcessing] = useState(false)

    return (
        <> </>
    )
}
export default File1

第二个文件也是如此

import './file2.css'; //css file specific to this component 
function File2(){
      const [processing, setProcessing] = useState(false)

    return (
        <> </>
    )
}
export default File2