I've been struggling to properly wire up my next.js project with SCSS, but no matter what I try, it just won't work.
I double-checked my setup for compiling SCSS files, but the error message keeps popping up:
/scss/style.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .example {
| color: blue;
| }
Here's the relevant code snippets:
next.config.js
const withSass = require("@zeit/next-sass");
module.exports = withSass();
_document.js
import Document, { Head, Main, NextScript } from "next/document";
export default class extends Document {
render() {
return (
<html>
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
<Head />
<body>
<Main />
<div id="modal" />
<NextScript />
</body>
</html>
);
}
}
index.js
import "../scss/style.scss";
import axios from "axios";
const Index = props => {
return (
<div>
<div className="example">hello</div>
<header>
<Header />
</header>
<section>
<Body stores={props.data} />
</section>
<footer>
<Footer />
</footer>
</div>
);
};
style.scss in SCSS folder
.example {
color: blue;
}