How to import bulma css globally with cssModules enabled

I’m trying to start a project in Next.js that uses CSS modules and bulma.io globally.

My next.config.js is this:

const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true,
  webpack: config => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    }

    return config
  }
})

I’ve a styles.scss imported in my component that is this:

:global {
  @import '~bulma/bulma';
}

but when compiling I get the following error:

./stylesheets/styles.scss
Missing whitespace before :global (9:2)

   7 |     transform: rotate(0deg); }
   8 |   to {
>  9 |     transform: rotate(359deg); } }
     |  ^
  10 |   :global .delete, :global .modal-close, :global .is-unselectable, :global .button, :global .file, :global .breadcrumb, :global .pagination-previous,
  11 |   :global .pagination-next,
  12 |   :global .pagination-link,

How can I use CSS modules but use bulma.io globally?

[timneutkens]

Adding next-sass will disable built-in support, so you have to remove https://github.com/pioz/next-sample/blob/master/next.config.js#L1-L4

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.