@webdeb/next-styles NPM

@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

fork the project ~master
locally clone the project in your machine ( git clone https/ssh github link to your fork )
create a new branch in your fork ( git checkout -b your/branch/name )
run npm install in your local clone of the repo
apply your code changes ( keep CHANGELOG.md and the README.md file up to date, also modify package.json version as fit!)
run npm pack in your local clone of the repo
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)
if your code work as expected, remove the packed tgz file from the repo and commit to your fork
create a PR to apply your fork in this repository