I used to write like this:
componynts / nav.jsx
Components / NAV.SCSS.
nav.jsx
import './nav.scss';
const nav = () = & gt; {
Return (
& lt; nav & gt;
& lt; a href = "#" & gt; Test & lt; / a & gt;
& lt; / nav & gt;
);
}
and next.js I knock out a mistake that you need to use modularity.
Error:
./ components / nav.css
Global CSS Cannot Be Imported From Files Other Than Your Custom & LT; App & GT;. Please Move All Global Css Imports to Pages \ _app.js. Or Convert the Import to Component-Level CSS (CSS Modules).
But I adhere to the Flux architecture, and I my way is more familiar and more convenient. Is it not yet?
Dependency
next, react, react-dom, sass
Answer 1
So Try:
Rename ./ nav.scss
– & gt; ./ nav.module.scss
import styles from './nav.Module.scss'
const nav = () = & gt; {
Return (
& lt; nav & gt;
& lt; a href = "#" classname = {styles.error} & gt; Test & lt; / a & gt;
& lt; / nav & gt;
);
}
nav.module.scss: (example)
. error {
Color: Red;
}