next-global-css
A preset for nextjs allowing using 3d party libraries with global css.
⚠️ Be careful, this solution can be unstable due to nextjs updates.
🏗 Compatible
Current version works only for 10th version of nextjs or higher.
☄️ Install and usage
Installation:
npm i -PE next-global-cssConfigure:
const { withGlobalCss } = require('next-global-css')
const withConfig = withGlobalCss()
module.exports = withConfig({
/* Next.js config options here */
})If your webpack configuration is already customized:
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:
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.