{"action":"opened","issue":{"url":"https://api.github.com/repos/zeit/next-plugins/issues/157","repository_url":"https://api.github.com/repos/zeit/next-plugins","labels_url":"https://api.github.com/repos/zeit/next-plugins/issues/157/labels{/name}","comments_url":"https://api.github.com/repos/zeit/next-plugins/issues/157/comments","events_url":"https://api.github.com/repos/zeit/next-plugins/issues/157/events","html_url":"https://github.com/zeit/next-plugins/issues/157","id":319322912,"number":157,"title":"next-sass broken since Next.js 6","user":{"login":"claus","id":2277,"avatar_url":"https://avatars1.githubusercontent.com/u/2277?v=4","gravatar_id":"","url":"https://api.github.com/users/claus","html_url":"https://github.com/claus","followers_url":"https://api.github.com/users/claus/followers","following_url":"https://api.github.com/users/claus/following{/other_user}","gists_url":"https://api.github.com/users/claus/gists{/gist_id}","starred_url":"https://api.github.com/users/claus/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/claus/subscriptions","organizations_url":"https://api.github.com/users/claus/orgs","repos_url":"https://api.github.com/users/claus/repos","events_url":"https://api.github.com/users/claus/events{/privacy}","received_events_url":"https://api.github.com/users/claus/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-05-01T20:48:24Z","updated_at":"2018-05-01T20:48:24Z","closed_at":null,"author_association":"NONE","body":"I think there is something fundamentally wrong with next-sass since Next.js 6.\r\n\r\nThe issue seems to be that ExtractTextPlugin extracts css for each bundle, but only keeps the css from the last bundle in `/_next/static/style.css`, resulting in only one page being styled correctly, while styles are broken in all other pages.\r\n\r\nThere are some issues filed here that i think describe all the same problem slightly differently:\r\n- https://github.com/zeit/next-plugins/issues/150\r\n- https://github.com/zeit/next-plugins/issues/149\r\n- https://github.com/zeit/next-plugins/issues/133\r\n\r\nI isolated the problem in a barebones project using Next 6.0.0 with next-sass and CSS Modules:\r\nhttps://github.com/MadeInHaus/next-6-sass-example\r\n\r\nOne hacky solution is implemented in this branch:\r\nhttps://github.com/MadeInHaus/next-6-sass-example/tree/solution\r\n\r\nI give a custom ExtractTextPlugin instance in `next.config.js` with a contenthash filename:\r\n\r\n```js\r\nconst withSass = require('@zeit/next-sass');\r\n\r\nconst ExtractTextPlugin = require('extract-text-webpack-plugin');\r\nconst extract = new ExtractTextPlugin({ filename: 'static/[contenthash].css' });\r\n\r\nmodule.exports = withSass({\r\n    cssModules: true,\r\n    extractCSSPlugin: extract,\r\n    webpack: config => {\r\n        config.plugins.push(extract);\r\n        return config;\r\n    },\r\n});\r\n```\r\n\r\nThen i pull in all generated css files in `_document.js` via `this.props.buildManifest.css`:\r\n\r\n```js\r\nexport default class MyDocument extends Document {\r\n    render() {\r\n        const { buildManifest } = this.props;\r\n        const { css } = buildManifest;\r\n        return (\r\n            <html>\r\n                <Head>\r\n                    {css.map(file => {\r\n                        return (\r\n                            <link\r\n                                rel=\"stylesheet\"\r\n                                href={`/_next/${file}`}\r\n                                key={file}\r\n                            />\r\n                        );\r\n                    })}\r\n                </Head>\r\n                <body>\r\n                    <Main />\r\n                    <NextScript />\r\n                </body>\r\n            </html>\r\n        );\r\n    }\r\n}\r\n```\r\n\r\nThis is a hack. There surely is a real solution but so far i wasn't able to come up with one.\r\n"}}
{"actor":{"display_login":"claus"}}