Base styles is loaded multiple times in the browser

[sagartalla]

I have a base stylus base.styl. I have it imported across multiple styl files for different components.

next.config.js

module.exports = withStylus(withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  webpack: (config, { dev }) => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    }
    config = commonsChunkConfig(config, /\.(styl|css)$/);
    return config
  }
}));

How to avoid loading multiple imports in the browser?