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: 6 months 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 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-24T08:47:17.000Z (over 3 years ago)
- Last Synced: 2025-03-20T19:17:36.619Z (9 months ago)
- Topics: nextjs, nextjs-global-css, nextjs-plugin
- Language: JavaScript
- Homepage:
- Size: 56.6 KB
- Stars: 90
- Watchers: 8
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# next-global-css
[][npm] [][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