Package Exports

@webdeb/next-styles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@webdeb/next-styles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

Credits

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