next-global-sass v1.0.2

next-global-sass

Import component-level SASS stylesheets anywhere in your Next.js project, just like in CRA

Requirements

This package does not include support for SASS automatically, please follow setup instructions on Next.js official docs

Demo

Check out this example on StackBlitz to see how it works

Installation

npm install -S next-global-sass

Or if you prefer using Yarn:

yarn add next-global-sass

Usage

Create a next.config.js in the root of your project (if it does not exist yet)

// next.config.js

const withGlobalSass = require("next-global-sass");
module.exports = withGlobalSass();

Optionally you can add your custom Next.js configuration as a parameter

// next.config.js

const withGlobalSass = require('next-global-sass');

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    ...
};

module.exports = withGlobalSass({ ...nextConfig });

Create SASS/SCSS stylesheets according to your needs and simply import them in your pages or components

// styles.scss

.sass-container {
    background-color: red;
    color: white;
}

// MyComponent.jsx

import './styles.scss'

export const MyComponent = () => {
    return (
        <div className="sass-container">
            Hello World
        </button>
    )
}

Note that the global styles can still be imported in the _app.js

Credits

Check out @frattaro's solution for non-module style imports in Next.js

License

MIT License © Stepan Pavlov