I've had a project running on Nextjs 10 for the last year. I updated to Nextjs 11.1.1 and when I run "npm run dev" I get the following error:

Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.js

I've read a lot about this issue already and the only global css import I have is in _app.js. Here is my pared-down _app.js:

import '../styles/globals.scss'

export default function App() {
  <div> hello </div>
}

And my pared-down globals.scss:

.test{
  border:5px black;
}

And my package.json file

{
  "name": "cabbieadvocate",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "16.0.0",
    "npm": "7.10.0"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
  },
  "cacheDirectories": [
    ".next/cache",
    "node_modules"
  ],
  "dependencies": {
    "@prisma/client": "^2.22.1",
    "@uppy/core": "^2.0.2",
    "@uppy/react": "^2.0.2",
    "@uppy/xhr-upload": "^2.0.2",
    "bulma": "^0.9.2",
    "googleapis": "^73.0.0",
    "is-buffer": "^2.0.5",
    "lodash": "^4.17.21",
    "multer": "^1.4.2",
    "mysql": "^2.18.1",
    "next": "11.1.1",
    "next-auth": "^3.20.1",
    "postmark": "^2.7.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-phone-number-input": "^3.1.21",
    "react-visibility-detector": "^1.1.1",
    "react-visibility-sensor-v2": "^1.0.0",
    "sass": "^1.32.12",
    "twilio": "^3.63.0",
    "validator": "^13.6.0"
  },
  "devDependencies": {
    "node-jose-tools": "^1.6.28",
    "prisma": "^2.22.1"
  }
}

This doesn't make any sense, please help.