Next.js: Unable to load .scss styles

[Calandal95]

Bug report

You may need an appropriate loader to handle this file type.

Describe the bug

I'm learning NextJs and after ended the getting started i decided to try styling my webapp.
I receive the error :

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
when trying to load an .scss file (not module) into my index.js
I've installed "@zeit/next-sass": "^1.0.1".

That's my code:

//index.js
import "../style.scss";

//inside the render:
<h1 className="example">Batman TV Shows</h1>

//style.scss

.example {
  font-size: 50px;
  color: papayawhip;
}

//config.next.js

const withSass = require('@zeit/next-sass')
module.exports = withSass()

Expected behavior

I expected to see the <h1> styled.

System information

• OS: Windows 10
• Browser: Chrome]
• Version of Next.js: 7.0.0

Thanks in advance for any help!
Alessio

[needcaffeine]

You're missing node-sass. You need to do yarn add @zeit/next-sass node-sass. Please see the installation section here: https://github.com/zeit/next-plugins/tree/master/packages/next-sass#installation

[needcaffeine]

Several things:

1. when you install @zeit/next-sass, you also need to install node-sass.
2. add the required lines of config to next.config.js per https://github.com/zeit/next-plugins/blob/master/packages/next-sass/readme.md
3. you no longer need to link to _next/static/style.css in Next v7, it is automatically injected for you.
4. From pages/index.js, you should now be able to do an import './main.scss' for example (or wherever your file is)

If you are still having trouble, I'd urge you to also check out https://github.com/zeit/next.js/tree/canary/examples/with-next-sass which will be a great reference.

[Calandal95]

Thanks! I had the node-sass but the problem was in the name of the config.
config.next.js instead of next.config.js :)
Thank for the help

[mehdipourfar]

I have node-sass. My next.config.js contains:

const withSass = require('@zeit/next-sass');
module.exports = withSass();

And I'm sure that that's being loaded.
However, I get the following error:

./scss/styles.scss
ModuleParseError: Module parse failed: Unexpected character '' (1:0)

My scss is written correctly and I can compile it to css with node-sass easily

[willmartinsmg]

You can solved your problem @mehdipourfar ?

I'm in same problem.

[mehdipourfar]

@willmartinsmg
After struggling with such issues, I considered not using next.js.

Anyway, as I remember you should also use next-css along with it and also beware of using related urls for loading your fonts. Errors that will be raised give absolutely no hint about where you have problem.

[BranceLee]

I solve the problem, the key problem is the difference

 <Link href="/shop">
  <a>shop<a/>
</Link>

// this make the new page rendered by the browser rather the sever,
// but if we use

<a href="/shop">shop<a/>

// we will tell the server to render the "shop" page, so the server will give rendered page to us. It same like we input the url path or reload the page. 😄
```

[bledar]

Use a Head tag on the _document.js file and import the sass files here. I think this will solve the problem.