NextJS - out 目录中缺少样式化的 jsx

Question

我在 NextJs 中有一个非常简单的项目。我想通过 NginX

提供文件

这些是我的依赖。

"dependencies": {
    "isomorphic-unfetch": "^2.0.0",
    "next": "^7.0.2",
    "next-routes": "^1.4.2",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "semantic-ui-react": "^0.80.2"
  }

我的路线js

const routes = require('next-routes')();


module.exports = routes;

我有一个整个应用程序的通用布局，如此处所示。注意样式 jsx

import React from 'react';
import { Container } from 'semantic-ui-react';
import Header from '../components/header';
import Head from 'next/head';


const Layout = (props) => {

    return(
        <Container style={{margin:'30px', 'backgroundColor':'#fff','borderRadius': '5px'}}>
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
                <meta charSet="utf-8" />
                    <style jsx global>{`
                      body { 
                        background: #202020;
                        font: 11px;
                      }

                      div.container {
                        margin: 30px;
                        padding-bottom: 2px;
                      }                                   
                    `}</style>              
            </Head>
            <Header />
            <div className='container'>
                {props.children}
            </div>
        </Container>
    );

};

export default Layout;

所有其他页面将使用此布局。

render() {
        return(
            <Layout>
                      <div>
                                          my app
                              </div>
            </Layout>
        );
    }

对于开发服务器，布局的样式化 jsx 得到正确应用。一切都很好。

如果我这样做，npm 运行构建和导出并使用输出内容进行静态托管，样式化的 jsx 完全缺失。

我还发现 out 目录有 index.html，它不服务于 css。如果使用 index/index.html css 就可以了。

再说一下正确的方法是什么？

Answer 1

您需要将 <style jsx> 标签放在 <Head> 之外。基本上所有 styled-jsx 样式都需要是根的子元素。

Here's the working example

只需下载即可（单击左上角中间 - 有一个下载按钮）。

<Container>
  <Head>
   ...
  </Head>
  <div className="container">{props.children}</div>
  <style jsx global>{`
    body {
      background: #202020;
      font: 11px;
    }

    container {
      margin: 30px;
      padding-bottom: 2px;
    }
  `}</style>
</Container>

这里有一些关于 styled-jsx 的其他有用信息，可以帮助您更好地管理样式：

还要考虑到 styled-jsx 并不是唯一的 CSS-in-JS 库。我个人比较喜欢styled-components，你应该看看。 Here's an example on how to implement it with Next.js.

干杯

NextJS - out 目录中缺少样式化的 jsx

NextJS - Styled jsx is missing in the out directory

css

next.js