Next.js: Why custom App has a priority low To build styles

Created on 1 Jun 2018 · 2Comments · Source: vercel/next.js

I encountered the problem that the assembly of styles does not happen as it should.

I have pages/index.js and pages/_app.js

abstract example index.js

import React, { Fragment } from 'react';
import Component2 from 'components/Component2';
import Component1 from 'components/Component1';

Example = () => (
   <Fragment>
     <Component 1>
     <Component2 />
   </Fragment>
)

abstract example _app.js

import React from 'react';
import App, { Container } from 'next/app';

import Header from 'components/Header';
import Footer from 'components/Footer';

class WrapperApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
    <Container>
      <MetaHead />
      <Header />
      <Component {...pageProps} />
      <Footer />
    </Container>
    );
  }
}

in the stylesheet file at the top I get the styles for the components in pages/index.js and after i see styles from normalize and Header and Footer.

global styles and normalize in

import React, { Component } from 'react';
import Head from 'next/head';
import 'styles/global.scss';

class MetaHead extends Component {
  render() {
    return (
      <Head>
        <link
          rel="stylesheet"
          type="text/css"
          href="/static/styles/fonts.css"
        />
        <link
          rel="stylesheet"
          type="text/css"
          href={
            buildId
              ? `/_next/static/style.${buildId}.css`
              : '/_next/static/style.css'
          }
        />
      </Head>
    );
  }
}

So, how to resolve this problem if import in App has low priority for build

Source