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

您可以创建单独的 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