如何从Next.js 13的新app文件夹中的公用文件夹中导入CSS个文件？
[英]How to import CSS files from public folder in the new app folder of Next.js 13?
问题描述
In a 'old fashion' way (utilising) /pages I would edit _app.js files under /pages directory adding something like:
以“老式”方式（利用） /pages ，我会编辑/pages目录下的_app.js文件，添加如下内容：
import Head from 'next/head'
export default function MyApp({ Component, pageProps }) {
return <>
<Head>
<link rel="stylesheet" href="/css/styles.css" />
</Head>
<Component {...pageProps} />
</>
}
However in a new version there is no /pages/_app.js file.但是在新版本中没有/pages/_app.js文件。 There are layout.js and head.js instead.有layout.js和head.js代替。 When I try to add in head.js (next to /favicon.ico) import I am getting error:当我尝试添加head.js （在 /favicon.ico 旁边）导入时出现错误：
react_devtools_backend.js:4012 Warning: Cannot render a outside the main document without knowing its precedence.
And when I try to import in layout.js file as below:当我尝试导入layout.js文件时，如下所示：
import "/css/styles.css";
I am getting compile error:我收到编译错误：
Module not found: Can't resolve '/css/styles.css'
I was checking the official docs but they suggest only how to import from global styles (../../..) and not from public folder.我正在查看官方文档，但他们只建议如何从全局 styles (../../..) 而不是从公共文件夹导入。
3 个解决方案
解决方案1
0 2022-12-27 22:58:41
As stated in the official doc here you need to create the pages/_app.js file if not already present.如此处的官方文档所述，您需要创建pages/_app.js文件（如果不存在）。
Then you can import as such:然后你可以这样导入：
import Head from 'next/head'
export default function MyApp({ Component, pageProps }) {
return <>
<Head>
<link rel="stylesheet" href="/css/styles.css" />
</Head>
<Component {...pageProps} />
</>
}
解决方案2
0 2022-12-27 23:52:18
You can use../.. to import from the public folder.您可以使用 ../.. 从public导入。
With the directory structure与目录结构
/[project root]
/public
/css
- styles.css
/app
- layout.js
You can import your styles using import '../public/css/styles.css'您可以使用import '../public/css/styles.css'导入您的 styles
解决方案3
0 2022-12-28 17:19:24
If you need a CSS that gets imported from public folder, you can do it in head.js as you said, but you need to add precedence="default" to your link , as they say in the documentation :如果您需要从public导入的 CSS，您可以按照您所说的那样在head.js中执行此操作，但您需要在link中添加precedence="default" ，正如他们在文档中所说：
If you want to manually place, it needs a precedence field which is a new React-specific attribute
<link rel="stylesheet" precedence="default" />.<link rel="stylesheet" precedence="default" />。
// in head.js alongside `layout.js` and `page.js`
export default function Head() {
return (
<>
<title>Create Next App</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" precedence="default" />
</>
);
}
You may get an Eslint warning saying "Do not include stylesheets manually" that you can deactivate by adding this comment:您可能会收到 Eslint 警告“不要手动包含样式表” ，您可以通过添加以下注释来停用该警告：
{/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/css/styles.css" precedence="default" />
Also, as you may already know, including a css file like this doesn't allow to have live reloading when you change its content, for example.此外，您可能已经知道，例如，包含这样的 css 文件不允许在您更改其内容时进行实时重新加载。 So to be used for external CSS that won't often.所以要用于不会经常使用的外部 CSS。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.