Nutty Professor Movie


    1.1.1 • Public • Published


    CSS + LESS + SASS + Modules in Next.js


    This module allows you to use css (+ optional [less, sass, modules]) all in one package. It uses the latest modules available css-loader, less-loader, sass-loader, postcss. Check out the sources, its dead simple.


    Because I found it cumbersome to deal with the official packages from next-plugins to setup css + less + sass + modules. So I created this one. It has everything I need for my project, most projects, I believe.


    npm install @webdeb/next-styles


    // next.config.js
    const withStyles = require('@webdeb/next-styles')
    module.exports = withStyles({
      less: true, // use .less files
      sass: true, // use .scss files
      modules: true, // style.(m|module).css & style.(m|module).scss for module files
      lessLoaderOptions: {
        javascriptEnabled: true,
      sassLoaderOptions: {
        sassOptions: {
          includePaths: ["src/styles"], // @import 'variables'; # loads (src/styles/varialbes.scss), you got it..
      cssLoaderOptions: {...},
      postcssLoaderOptions: {...},
      miniCssExtractOptions: {...} // ignoreOrder:true for

    Hint: Look at the source of truth: withStyles.js

    Known Issues

    This project inherits a known next-css problem.

    If your pages where you are importing css are not working, you are probably facing exactly this problem. The workaround is to load a css/scss file (can be even empty) into your _app.js.

    import "../styles/global.scss"
    export default function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />

    How to contribute

    1. fork the project ~master
    2. locally clone the project in your machine ( git clone https/ssh github link to your fork )
    3. create a new branch in your fork ( git checkout -b your/branch/name )
    4. run npm install in your local clone of the repo
    5. apply your code changes ( keep and the file up to date, also modify package.json version as fit!)
    6. run npm pack in your local clone of the repo
    7. test your changes against a next.js project that uses your local repo ( use npm install --save path/to/local/repo/{version}.tgz to test your locally changed code)
    8. if your code work as expected, remove the packed tgz file from the repo and commit to your fork
    9. create a PR to apply your fork in this repository


    Most of the code was taken from the official next-css & next-sass package.


    npm i @webdeb/next-styles

    DownloadsWeekly Downloads






    Unpacked Size

    11.4 kB

    Total Files


    Last publish


    • webdeb