Next.js: External stylesheet loads only partly.

Created on 20 Jan 2018 · 4Comments · Source: vercel/next.js

Hi,

Firstly gratulate to the entire team of next.js. You guys are doing an amazing job!

My issue came up loading CSS rendering on the server side. My CSS loads only partly. If I do a hard refresh or navigate to a page it loads only partly. However If I am navigating with BACK/FORWARD in the browser it loads correctly. Same applies when developping and using hot-reload.

Any idea what it could be ? Couldn't find similar issue, if there is forgive me and just link it here please.

Happy Hacking,
Koppany,

my _document.js :

import Document, { Head, Main, NextScript } from "next/document";
import flush from "styled-jsx/server";

import stylesheet from "src/assets/css/styles.scss";

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const { html, head, errorHtml, chunks } = renderPage();
    const styles = flush();
    return { html, head, errorHtml, chunks, styles };
  }

  render() {
    return (
      <html>
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
          <link
            href="https://fonts.googleapis.com/css?family=Rubik:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Montserrat:400,700"
            rel="stylesheet"
          />
          <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
        </Head>
        <body>
          {this.props.customValue}
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

next.config.js:

const path = require('path')
const glob = require('glob')

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      }
    ,
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader']
      }
    ,
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }
    )
    return config
  }
}

.babelrc:

{
  "plugins": [
    [
      "module-resolver", {
        "root": ["."],
        "alias": {
          "styles": "./styles"
        },
        "cwd": "babelrc"
    }],
    [
      "wrap-in-js",
      {
        "extensions": ["css$", "scss$"]
      }
    ]
  ],
  "presets": [
    "next/babel"
  ],
  "ignore": []
}

Source