@webdeb/next-styles

CSS + LESS + SASS + Modules in Next.js

Description

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.

Why?

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.

Install

npm install @webdeb/next-styles

Use

// 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 https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-544898772
})

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

Known Issues

This project inherits a known next-css problem. https://github.com/zeit/next-plugins/issues/282

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 CHANGELOG.md and the README.md 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

Credits

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