Prerequisites
Sass installed:
npm install sass
Scope 1: Setup Global SCSS
📁 File Structure
/styles └── globals.scss
└── variables.scss
🔗 Import in _app.tsx
// pages/_app.tsximport '../styles/globals.scss';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
✅ Best For: Reset styles, typography, body-level defaults.
Scope 2: Use SCSS Modules Per Component
🎯 Why Use This?
Avoid style leakage, keep styles local to components.
🛠 Example
/components/ └── Button.module.scss
// components/Button.tsximport styles from './Button.module.scss';
export default function Button() {
return <button className={styles.primary}>Click me</button>;
}
✅ Best For: Encapsulated, reusable components.
🧩 Scope 3: Share Variables & Mixins Across Files
🛠 Example
// styles/_variables.scss$primary-color: #0070f3;
🛠 Use Anywhere
// styles/globals.scss or Button.module.scss@import './variables';
.button {
color: $primary-color;
}
🚨 Important: @import is deprecated in Sass. Migrate to @use or @forward for modern workflows.
Also Read: ReactJS Material Design
🚀 Optional: Auto-Import SCSS Variables Everywhere
You can avoid manually importing _variables.scss in every file.
✅ With sass-resources-loader (needs Webpack override):
1. Install dependencies:
npm install sass-resources-loader
2. Customize Webpack:
// next.config.jsconst path = require('path');
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.scss$/,
use: [
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, 'styles/variables.scss'),
},
},
],
});
return config;
},
};
✅ Tips
- Use globals.scss for app-wide layout or reset.
- Use .module.scss for isolated styling.
- Extract variables/mixins into shared SCSS files and import where needed.
- For larger teams, automate variable imports using sass-resources-loader or adopt @use/@forward syntax.
