无法从自定义 <App> 以外的文件导入全局 CSS答案

【问题标题】：Global CSS cannot be imported from files other than your Custom <App>无法从自定义 <App> 以外的文件导入全局 CSS
【发布时间】：2021-11-04 04:17:08
【问题描述】：

我收到以下错误：

./styles/globals.scss
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.tsx

当我在_app.tsx 中注释掉以下行时，此错误消失了

// import "@styles/globals.scss";

但是注意到样式表没有被应用。任何想法如何解决这个问题？

这是我的npm list的输出

 $ npm list --depth 0
├── @types/react@17.0.20
├── eslint-config-next@11.1.2
├── eslint@7.32.0
├── next@11.1.2
├── react-dom@17.0.2
├── react@17.0.2
├── sass@1.39.0
└── typescript@4.4.2

 $ npm list -g --depth 0
/Users/glaksmono/.nvm/versions/node/v16.8.0/lib
└── npm@7.22.0

【问题讨论】：

正如错误所说，将导入移动到_app.js
嗨@Nico - 导入已经在_app.tsx 中，我尝试将其重命名为 .js 但随后所有 ASX 系统税都会被破坏
尝试在根目录下创建css文件并像import '../style.css' in _app.jsx一样导入
@SandipNirmal 仍然收到此错误event - build page: /next/dist/pages/_error wait - compiling... error - ./test.css 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.tsx
既然一切看起来都正确，你能尝试一次干净的重启吗？删除node_modules、.next，然后执行npm i、npm run dev

标签： node.js typescript next.js

【解决方案1】：

我遇到了同样的问题，我认为问题在于我的所有代码都被 SmartSynced 到 Dropbox。一旦我在没有别名到 Dropbox 目录的文件夹中运行 create-next-app ，一切正常。我怀疑 Node/Webpack 由于别名而看到了错误的路径并导致了错误。

【讨论】：

【解决方案2】：

显然，Windows 上的next@11.1.1 发生了重大变化。降级到next@11.1.0 以解决此问题。

来源：https://stackoverflow.com/a/68992114/12198209

【讨论】：