https://github.com/bem/next-global-css

A preset for nextjs allowing using 3d party libraries with global css
https://github.com/bem/next-global-css

nextjs nextjs-global-css nextjs-plugin

Last synced: 2 days ago
JSON representation

A preset for nextjs allowing using 3d party libraries with global css

• Host: GitHub
• URL: https://github.com/bem/next-global-css
• Owner: bem
• License: mit
• Created: 2021-05-04T12:16:35.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-06-24T08:47:17.000Z (over 2 years ago)
• Last Synced: 2024-10-14T06:38:27.323Z (24 days ago)
• Topics: nextjs, nextjs-global-css, nextjs-plugin
• Language: JavaScript
• Homepage:
• Size: 56.6 KB
• Stars: 87
• Watchers: 9
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
# next-global-css

[![npm](https://img.shields.io/npm/v/next-global-css.svg?style=flat-square&labelColor=111)][npm] [![node](https://img.shields.io/badge/nextjs-10+-007ecc?style=flat-square&labelColor=111)][nextjs]

A preset for [nextjs][nextjs] allowing using 3d party libraries with global css.

> ⚠️ Be careful, this solution can be unstable due to [nextjs][nextjs] updates.

## 🏗 Compatible

Current version works only for 10th version of [nextjs][nextjs] or higher.

## ☄️ Install and usage

**Installation:**

```sh

npm i -PE next-global-css

```

**Configure:**

```js

const { withGlobalCss } = require('next-global-css')

const withConfig = withGlobalCss()

module.exports = withConfig({

  /* Next.js config options here */

})

```

**If your webpack configuration is already customized:**

```js

const { patchWebpackConfig } = require('next-global-css')

const nextConfig = {

  /* config options here */

  /* your already customized webpack option */

  webpack: (config, options) => {

    patchWebpackConfig(config, options)

  },

}

```

**Allow css-modules from node-modules:**

```js

const { patchWebpackConfig } = require('next-global-css')

const webpackNodeExternals = require('webpack-node-externals')

module.exports = {

  reactStrictMode: true,

  webpack: (config, options) => {

    patchWebpackConfig(config, options)

    if (options.isServer) {

      config.externals = webpackNodeExternals({

        // Uses list to add this modules for server bundle and process.

        allowlist: [/design-system/],

      })

    }

    return config

  },

}

```

## 📜 License

Project is [MIT licensed](https://github.com/yarastqt/next-global-css/blob/master/license.md).

[nextjs]: https://nextjs.org/

[npm]: https://www.npmjs.com/package/next-global-css