由于webpack错误nextjs css样式错误，生成失败

ax6ht2ek 于 2022-11-23 发布在 Webpack

关注(0)|答案(2)|浏览(309)

我遇到了这个错误，我很难理解我是否正确地导入了我的样式以及以正确的方式使用组件，有人能引导我走上正确的道路吗？

Cloning github.com/branexists/nextjs (Branch: main, Commit: 30c148b)
Cloning completed: 1.626s
Build cache restored
Running "vercel build"
Vercel CLI 28.4.14
Installing dependencies...
up to date in 498ms
80 packages are looking for funding
  run `npm fund` for details
Detected Next.js version: 13.0.2
Detected `package-lock.json` generated by npm 7+...
Running "npm run build"
> nextjs@0.1.0 build
> next build
info  - Linting and checking validity of types...
info  - Creating an optimized production build...
(node:318) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
Failed to compile.
./styles/hero.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: comps/Hero.js
Import trace for requested module:
./styles/hero.css
./comps/Hero.js
./styles/hero.css
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String
    at processResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395049)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:396519
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:283578
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280385)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280470)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280699
    at runSyncOrAsync (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:279045)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280602)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:1:280244
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994
Import trace for requested module:
./styles/hero.css
./comps/Hero.js
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1

`
我尝试将导入的语法从导入样式更改为仅导入，因为在上一个问题中，我被告知不能导入多个样式

next.js

来源：https://stackoverflow.com/questions/74324829/build-failed-due-to-webpack-errors-nextjs-css-styles-error

2条答案

按热度按时间

af7jpaap1#

从你的错误中

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).

因此，如果要全局添加样式，请使用项目根目录中的styles文件夹，然后导入到_app. js。
对于组件，使用name.module.css并将其放在components文件夹中
参考：https://nextjs.org/docs/messages/css-global

赞(0）回复(0）举报 2022-11-23

oknwwptz2#

您可以在组件目录中创建一个css文件夹，也可以为每个组件创建单独的css文件。
在您的hero.js中

import React from "react";
import styles from "../comps/hero.module.css";

export default function Hero() {
  return (
    <div className={styles.Header}>
      <p>test</p>
    </div>
  );
}

如果愿意，您还可以尝试使用样式化组件等库。

赞(0）回复(0）举报 2022-11-23

我来回答

由于webpack错误nextjs css样式错误，生成失败

2条答案

相关问题

热门标签

最新问答