如何正确执行 nextjs css 或 scss 中的路径？

Question

When I'm creating NextJS projects(i'm still practicing).当我创建 NextJS 项目时（我还在练习）。 It always ask me about 5 things which is它总是问我 5 件事

Typescript - No / Yes ESLint - No / Yes src / directory - No / Yes app / directory ( I forgot just imagine it when you creating one) - No / Yes imports '@/' - No / Yes Typescript - 否 / 是 ESLint - 否 / 是 src / 目录 - 否 / 是 app / 目录（我忘了你创建一个时想象它） - 否 / 是导入 '@/' - 否 / 是

And I always input Yes-Yes-No-No-Yes since I know typescript and ESLint, but I don't know how the path works with CSS.而且我总是输入 Yes-Yes-No-No-Yes，因为我知道 typescript 和 ESLint，但我不知道该路径如何与 CSS 一起使用。

so the folder was created something like this所以文件夹是这样创建的

-pages -页面

-public -民众

-styles -样式

so basically I have this in pages/_app.tsx right所以基本上我在pages/_app.tsx中有这个

import 'bootstrap/dist/css/bootstrap.min.css'
import '@/styles/globals.css'

and then in my styles I have two css which is navbar.module.css and global.module.css然后在我的 styles 中有两个 css 是 navbar.module.css 和 global.module.css

but the thing is that I can make like naming module css right like pass it to the className 's?但问题是我可以像命名模块 css 一样将它传递给className吗？

So this is in my navbar.module.css所以这是在我的navbar.module.css

.navbar_header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 50px;
}

.navbar_parent {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px;
    background: rgba(255, 230, 0, 0.46);
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.39);
    border-radius: 30px;
}

.links {
    padding: 5px;
    background: linear-gradient(180deg, #FFC27B 0%, #FFE91F 85.42%);
    border-radius: 15px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

And at the part of pages/navbar.tsx I pass there my navbar.module.css在 pages/navbar.tsx 部分，我将navbar.module.css传递到那里

import Link from 'next/link'
import React from 'react'
import styles from '@/styles/navbar.module.css'

const Navbar = () => {
    return (
        <div className={styles.navbar_header}>
            <div className={styles.navbar_parent}>
                <Link  className={styles.links} href={'/'}>
                    <h5> 
                        Home
                    </h5>
                </Link>
                <Link  className={styles.links} href={'/authentication/auth'}>
                    <h5>
                        Sign Up / Log In
                    </h5>
                </Link>
            </div>
        </div>
    )
}

export default Navbar

Also in my pages/index.tsx I have this code同样在我的 pages/index.tsx 中我有这段代码

import Head from 'next/head';
import Navbar from './navbar';

export default function Home() {
  return (
    <>
      <Head>
        <link rel="icon" href="/p5.png" />
        <title> Next.JS Designing </title>
      </Head>
      <body>
        <Navbar/>
      </body>
    </>
  )
}

and I always get this thing.我总是得到这个东西。 error in front of the website.网站前面的错误。

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Is there something wrong I miss here?我想念这里有什么问题吗？

Answer 1

Nvm the error came from <body></body> that was created in the <Navbar/> at the index.tsx hahahaha Nvm 错误来自<body></body>是在index.tsx的<Navbar/>中创建的 hahahaha

如何正确执行 nextjs css 或 scss 中的路径？

问题描述

1 个解决方案

解决方案1
0 2023-01-31 07:35:07

如何正确执行 nextjs css 或 scss 中的路径？

问题描述

1 个解决方案

解决方案1 0 2023-01-31 07:35:07

解决方案1
0 2023-01-31 07:35:07