我发现了这样的示例(https://github.com/zeit/next.js/tree/canary/examples/with-app-layout)来全局覆盖_app.js,但是我没有找到它的导入位置,因此没有使用npm进行编译。我想使用相同的CSS并存储在不同的页面中。我该如何导入/解决它,或者可以使用什么呢?
_app.js
import React from 'react'
import App, { Container } from 'next/app'
import Head from 'next/head'
import LoadingBar from '../components/loadingbar.js'
import { Provider } from 'mobx-react'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.min.css'
import 'toastr/build/toastr.min.css'
import 'bootstrap-toggle/css/bootstrap2-toggle.min.css'
import '../public/skins/darkly.min.css'
import AuthStore from '../store/AuthStore.js'
import ServerStore from '../store/ServerStore.js'
import LoadingStore from '../store/LoadingStore.js'
export default class MyApp extends App {
render() {
loadingStore = new LoadingStore()
serverStore = new ServerStore(loadingStore)
authStore = new AuthStore(loadingStore)
const { Component, pageProps, serverStore } = this.props
return (
<div>
<Provider loadingStore={loadingStore}>
<LoadingBar loadingStore={loadingStore}></LoadingBar>
<Provider authStore={authStore}>
<Provider serverStore={serverStore}>
<Component {...pageProps} />
</Provider>
</Provider>
</Provider>
<style jsx="true">{`
.highlight {
background: var(--orange);
color: var(--white);
border-radius: .2rem;
}
.btn-xs {
font-size: 12px
}
`}</style>
</div>
)
}
}
index.js
import React from 'react'
const Index = () => {
return 'index'
}
export default Index