Global CSS cannot be imported from files other than your Custom <App>.

## Current Behavior Given a generated NextJs app that imports a generated shared react lib with a default component that uses either css or cssModule imports fails throwing an error.

Expected Behavior

Given a default NextJs app that imports a shared react lib with a default component that uses either css or cssModule imports should just work, no need to adapt next.config.js as both imports are supported by default in NextJs.

Is this a regression? Not sure, I am able to reproduce with brand new workspace and latest version of every plugin.

Steps to Reproduce

1. npx create-nx-workspace test-bug [choose empty setup]
2. npm i -D @nrwl/next
3. nx generate @nrwl/next:application --name=test-bug
4. nx generate @nrwl/react:library --name=shared-library
5. in the generated nextjs app add the shared component to the render function
6. try run the app nx serve test-bug
7. try renaming components css file to => xxx.module.css and it’s corresponding import

Failure Logs

warn  - Detected next.config.js, no exported configuration found. https://err.sh/vercel/next.js/empty-configuration
info  - automatically enabled Fast Refresh for 1 custom loader
info  - Using external babel configuration from /Users/danielq/Projects/test-workspace/apps/test-bug/.babelrc
event - compiled successfully
[ ready ] on http://localhost:3000
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
event - build page: /
wait  - compiling...
error - /Users/danielq/Projects/test-workspace/libs/shared-components/src/lib/shared-components.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: ../../libs/shared-components/src/lib/shared-components.tsx

Environment

nx : Not Found @nrwl/angular : Not Found @nrwl/cli : 10.2.1 @nrwl/cypress : 10.2.1 @nrwl/eslint-plugin-nx : 10.2.1 @nrwl/express : Not Found @nrwl/jest : 10.2.1 @nrwl/linter : 10.2.1 @nrwl/nest : Not Found @nrwl/next : 10.2.1 @nrwl/node : Not Found @nrwl/react : 10.2.1 @nrwl/schematics : Not Found @nrwl/tao : 10.2.1 @nrwl/web : 10.2.1 @nrwl/workspace : 10.2.1 typescript : 3.9.7

[jaysoo]

This will come in 10.4, which will land before American Thanksgiving. We’ll cut a beta release before stable.

[msreekm]

Got the similar error when selecting sass for styling while generating a component- nx g component PartyPopper --project=demo --style=scss i dont next.js let you do import ‘./party-popper.scss’; inside components! it has to be css modules .module.css

this is what i had to do to get it working-

1. rename party-popper.scss to party-popper.module.scss
2. change import to import styles from ‘./party-popper.module.scss’;
3. to apply the style - <div className={**styles**.container}>

code generator should be updated to updated the generate code.

I am happy to create a PR ,but I was not able to find the correct file to make the change inside packages/next folder. @jaysoo ?