My preferred method involves utilizing a global .scss file that houses all the foundational styles, such as primary color selections. Following this, I create separate modules for each React Component to maintain organization and reduce the need for importing excessive .css files.
Despite finding success with this strategy, an unexpected error has arisen.
Within my styles/global.scss file, I have defined the following:
$primary-color: #6dd3d6;
body {
margin: 0;
padding: 0;
}
In addition, I possess another file named NavBar.module.scss, featuring the subsequent content:
@import "styles/global";
.nav {
display: flex;
padding: 20px;
background: $primary-color;
}
Examining my _app.js document reveals the following structure:
import React from 'react';
import '../styles/global.scss'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
Moreover, within my NavBar.js file, the ensuing code is evident:
import React from 'react';
import styles from './NavBar.module.scss';
export default function NavBar() {
return(
<nav className={styles.nav}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
);
However, an issue surfaces with the appearance of the following error message:
./components/NavBar.module.scss:3:1
Syntax error: Selector "body" is not pure (pure selectors must contain at least one local class or id)
1 | $primary-color: #6dd3d6;
2 |
> 3 | body {
| ^
4 | margin: 0;
5 | padding: 0;