Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

External stylesheet loads only partly. #3597

Closed
kondricz opened this issue Jan 20, 2018 · 4 comments
Closed

External stylesheet loads only partly. #3597

kondricz opened this issue Jan 20, 2018 · 4 comments

Comments

@kondricz
Copy link

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": []
}
@timneutkens timneutkens mentioned this issue Jan 20, 2018
Merged
@timneutkens
Copy link
Member

#3578 will most likely fix this when it lands 👍

@supeng911
Copy link

that's a good news

@kondricz
Copy link
Author

thanks. Thats a good news! Do You have any forecast when is it expected to be merged ?

@timneutkens
Copy link
Member

When we fix the remaining failing tests 🙏

@lock lock bot locked as resolved and limited conversation to collaborators Jan 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@timneutkens @supeng911 @kondricz