NextJS - 输出目录中缺少样式化的 jsx答案

【问题标题】：NextJS - Styled jsx is missing in the out directoryNextJS - 输出目录中缺少样式化的 jsx
【发布时间】：2018-10-26 21:28:44
【问题描述】：

我在 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 run build & export 并将 out 内容用于静态托管，样式化的 jsx 完全没有了。

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

再次，正确的方法是什么？

【问题讨论】：

嘿，你能提供一个可行的例子吗？也许使用codesandbox.io？他们已经拥有 Next.js 支持

标签： css next.js

【解决方案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.

干杯

【讨论】：

感谢您的澄清。这么小的一个错误让我发疯了几天。 StackOverflow 不让我奖励你 100 分。！！看来我们需要等待！