Next.js 中每页的 CSS 拆分

Question

我需要将我的 css 样式表拆分为多个文件，每个 Next.js 页面一个。如何实现？

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

我也尝试过使用styled-jsx。它对我有几个问题。它的问题页面上有许多错误。我也未能使用这种方法使样式在整个子组件中可见。

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 应用还支持使用sass，允许您导入.css 和.scss 文件。

有关更多信息，您可以查看Vercel Docs。我还建议您查看Learning area。

Answer 2

您可以创建单独的 css 文件，并在需要特定样式的每个组件上导入该组件唯一的 css 文件。例如，假设您在文件 file1.js 中有一个组件，那么您可以在文件 file1.css 中导入特定于该组件的样式，对于另一个文件 file2 和 css file2.css 也会发生同样的情况@

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