Next.js: Failed to load pages importing css

[hikoma]

Bug report

Describe the bug

I'm working on next.js 7.0.0 and next-css 1.0.0.
I created following two pages.

pages/index.tsx

import Link from 'next/link';
export default () => <Link href="/css"><a>Go</a></Link>;

pages/css.tsx

import "../style.css";
export default () => <div className="example">styled text</div>;

When I click the link in the index page, css page is not displayed.
I removed the import statement from css page, it works fine.

To Reproduce

1. Clone [email protected]:hikoma/next-css-bug.git
2. yarn && yarn dev
3. Click a "With css import" link

Expected behavior

Pages importing css should be loaded.

System information

• OS: Ubuntu 18.04
• Version of Next.js: 7.0.0
• Version of next-css: 1.0.0

[needcaffeine]

@hikoma -- What happens if you upgrade to next-css 1.0.0?

[hikoma]

@needcaffeine Not working yet.

[vvkkhjt]

@hikoma I have the same question,Whether I use less or sass or CSS,the same problem show up。

[zlwaterfield]

I have the same issue, after upgrading it is failing to load in styles.

...
    "@zeit/next-sass": "^1.0.1",
    "next": "^7.0.0",
...

http://localhost:3000/_next/static/style.css is 404ing so it is not being generated.

It works on

...
    "@zeit/next-sass": "^0.2.0",
    "next": "^6.0.3",
...

[vvkkhjt]

@zlwaterfield @hikoma I find a way 👍

import one of less or css file in _app.js
then you can import other style file in other pages

//_app.js

import '../scss/index.less'

//index.less

body{}

this problem is fixed,
but I dont know this is a bug?

[needcaffeine]

@hikoma @vvkkhjt @zlwaterfield -- Please look at https://github.com/zeit/next.js/issues/5237#issuecomment-423405486 where I posted all the necessary steps to get this to work.

[zlwaterfield]

@needcaffeine I have followed those exactly, the only thing I missed was that you no longer need to link to _next/static/style.css in Next v7, it is automatically injected for you. - which is still present in the example btw https://github.com/zeit/next.js/blob/canary/examples/with-next-sass/pages/_document.js#L14

Based on the docs, the update to next 7 and @zeit/next-sass 1 requires no changes except for removing the link to the static styles. However, after upgrading my styles don't load and there are no errors. As I mentioned I have it working on next 6.

I have cloned https://github.com/zeit/next.js/tree/canary/examples/with-next-sass in order to compare what may be different and the only this I see different is that the example is loading _next/static/css/styles.chunk.css whereas my project is not, which is obviously the issue. I do see styles.chunk.css in my build-manifest.json for the page I am loading and the actually built css file does have all the styles, it's just not being loaded. Any insights into why this might be happening?

[needcaffeine]

@hikoma I cloned your repo and ran it locally, and was able to reproduce your bug.

Basically, going to /css works with server-side routing, but client-side routing using <Link> fails. Adding this line to pages/index.jsx import "../style.css"; allows the /css page to load, but I'm not sure that's the right fix because that would then be a global import.

[hypercodex]

+1

[dilvermg]

+1

[nisargrthakkar]

any update on this?

[hikoma]

https://github.com/zeit/next-plugins/issues/282#issuecomment-426752008 is helpful

[timneutkens]

Duplicate of https://github.com/zeit/next-plugins/issues/282

[cheong12001]

any updates?

[ofarukcaki]

I still have the same problem

[deltaepsilon]

I've got this issue too :(