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将运行build＆export，并将out内容用于静态托管，则样式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

1 个答案: