问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Next.js 全局 CSS 无法从自定义 <App> 以外的文件导入

社区维基
1
新手上路，请多包涵

我的 React 应用程序运行良好，也使用了全局 CSS。

我跑了 npm i next-images ，添加了一张图片，编辑了 next.config.js ， ran npm run dev ，现在我收到了这条消息

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

我检查了文档，但我发现说明有点混乱，因为我是 React 新手。

另外，为什么现在会发生此错误？你认为它与 npm install 有什么关系吗？

我试图删除我与他们的代码一起添加的新文件，但这并不能解决问题。我也尝试了阅读更多：建议的内容。

我的最高层组件。

 import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';

const Layout = (props) => (
  <div>
    <Head>
      <title>Bitcoin Watcher</title>
    </Head>
    <Navbar />
    <div className="marginsContainer">
      {props.children}
    </div>
  </div>
);

export default Layout;

我的 next.config.js

 // next.config.js
  const withSass = require('@zeit/next-sass')
  module.exports = withSass({
  cssModules: true
})

我的 main.scss 文件

@import './fonts.scss';
@import './variables.scss';
@import './global.scss';

我的 global.scss

 body {
  margin: 0;
}
:global {
  .marginsContainer {
    width: 90%;
    margin: auto;
  }
}

我发现最奇怪的是，这个错误没有改变任何与 CSS 或 Layout.js 相关的东西，而且它以前可以工作？

我已将 main.scss 导入移至 pages/_app.js 页面，但样式仍未通过。这就是 _app.js 页面的样子

import '../global-styles/main.scss'

export default function MyApp({ Component, props }) {
  return <Component {...props} />
}

原文由 IndustryDesigns 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssreactjsimportsassnext.js
阅读 2.2k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

使用内置的 Next.js CSS 加载器（参见 此处）而不是旧版 @zeit/next-sass 。

  1. 将 @zeit/next-sass 包替换为 sass 。
  2. 删除 next.config.js 。或者不要更改其中的 CSS 加载。
  3. 按照错误消息中的建议移动全局 CSS。

由于 Next.js 9.2 全局 CSS 必须在 Custom <App> 组件中导入。

 // pages/_app.js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

要将样式仅添加到 特定组件或页面，您可以使用 CSS 模块的内置支持。 （见 这里）

例如，如果您有一个组件 Button.js 您可以创建一个 Sass 文件 button.module.scss 并将其包含在该组件中。

原文由 Nikolai Kiselev 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

Next.js stops complaining when your file has module in naming, eg, changing import '../global-styles/main.scss'; to import '../global-styles/main.module.scss'; would fix the warning and you could have your global-styles 中的样式，或者例如 component 中的样式。

next.config.js 中不需要额外的依赖项/配置。

原文由 Daniel Danielecki 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题