Nutty Professor Movie

    @webdeb/next-styles

    1.1.1 • Public • Published

    @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.

    Install

    npm i @webdeb/next-styles

    DownloadsWeekly Downloads

    696

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    11.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • webdeb