Why does importing CSS modules in _document.js not work?
#16726
-
// styles.module.css
.link {
color: green;
}// _document.js
import styles from "../styles.module.css";
...
<body>
<a className={styles.link}>A link</a>
<Main />
<NextScript />
</body>
....The styles are not applied to the element. It is given a scoped className, but this className doesn't contain the styles. Is this intended? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Correct, these will not work in a custom Document per the docs. You should be able to relocate this logic to |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! In this case I'm building a skip-nav link. Can this be placed inside the |
Beta Was this translation helpful? Give feedback.
-
|
As long as it is near the top of the DOM and one of the first elements, it can be within the
So it sounds like in your case it will be the first element that a screen reader would come to, so putting it inside |
Beta Was this translation helpful? Give feedback.
Correct, these will not work in a custom Document per the docs.
You should be able to relocate this logic to
_app.jsand be able to use CSS modules there.