Next.js - 导入 css 文件不起作用
Posted
技术标签:
【中文标题】Next.js - 导入 css 文件不起作用【英文标题】：Next.js - import css file does not work 【发布时间】：2018-10-13 10:53:46 【问题描述】：我正在用react、redux和next.js创建一个项目，想在js中导入CSS文件。
我按照next.js/#css 和next-css 中的说明进行操作，但发现 CSS 样式不起作用。
我的代码如下：
pages/index.js:
import React from 'react'
import "../style.css"
class Index extends React.Component
render()
return (
<div className="example">Hello World!</div>
);
export default Index
下一个.config.js：
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
style.css：
.example
font-size: 50px;
color: blue;
package.json:
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies":
"@zeit/next-css": "^0.1.5",
"next": "^6.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.4",
"redux": "^4.0.0",
"redux-devtools": "^3.4.1"
,
"scripts":
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"dev": "next",
"build": "next build",
"start": "next start"
问题：
1. Chrome 中存在“Uncaught SyntaxError”，但似乎不影响页面的渲染。但我仍然想知道原因和解决方案。 chrome中的index.js错误低于img
2. 如 Chrome 中所示，没有“示例”类，这意味着 style.css 文件没有加载。我错过了什么吗？ chrome 中没有 CSS 文件
提前致谢。
【问题讨论】：
嗨@ArgentBarbie，您是否在pages 目录中创建了_document.js 文件？如果有的话，你能把代码也贴在这里吗？
@mtl 抱歉，我没有创建 _document.js。有必要吗？文件里面应该有什么？
嗨@ArgentBarbie，以后尽量一次只问一个问题:)。如果您有两个问题，只需问两个单独的问题。对于可能只对其中一个问题有答案的两个不同的人，它可以更容易地回答。它使个人问题可搜索，帮助其他人解决同样的问题。祝 Next.js 好运！
【参考方案1】：
编辑 2：从 Next.js > 10 开始，您可以将全局 CSS 文件导入 _app.js，并且可以在组件中使用 CSS 模块。更多内容请关注Next.js docs。
编辑：从 Next.js 7 开始，支持导入 .css 文件所需要做的就是在 next.config.js 中注册 withCSS 插件。首先将插件安装为开发依赖项：
npm install --save-dev @zeit/next-css
然后在您的项目根目录中创建next.config.js 文件，并在其中添加以下内容：
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS(/* my next config */)
您可以通过创建一个简单的页面并导入一些 CSS 来测试它是否有效。首先创建一个 CSS 文件：
// ./index.css
div
color: tomato;
然后使用index.js 文件创建pages 文件夹。然后你可以在你的组件中做这样的事情：
// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>
您还可以使用带有几行配置的 CSS 模块。有关这方面的更多信息，请查看nextjs.org/docs/#css 上的文档。
已弃用：Next.js
您还需要在pages 文件夹中创建一个_document.js 文件并链接到已编译的CSS 文件。试试下面的内容：
// ./pages/_document.js
import Document, Head, Main, NextScript from 'next/document'
export default class MyDocument extends Document
render()
return (
<html>
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
样式表被编译为.next/static/style.css，这意味着CSS文件是从/_next/static/style.css提供的，这是上面代码中link标签中href属性的值。
至于第一个问题，可能是 Chrome 不理解导入语法。尝试在chrome:flags 中启用 Experimental Web Platform 标志，看看是否可以解决问题。
【讨论】：
仅导入 .css 文件会影响开发模式下的 next/router 行为。Router.push 和 replace 等某些功能会挂起，无法正常工作。
这不正是他的代码中的内容吗？我找不到区别。我遵循了相同的步骤，但它不适合我
@Jonas 我同意，这正是他所拥有的。我有同样的，它也不工作。【参考方案2】：
对于来到这里的任何人，新的 Next JS 都支持开箱即用的 CSS。问题是对于模块（组件），它们必须被命名为组件。因此，如果您在 components 目录中有标题，则必须将其命名为 header.module.css
built-in-css-module-support-for-component-level-styles
【讨论】：
谢谢伙计！正是我需要的。【参考方案3】：将name.css 添加到src/static/styles/。
然后修改src/pages/_document.js中的Head，使其包含以下link：
<Head>
<link href="/static/styles/name.css" rel="stylesheet">
</Head>
【讨论】：
【参考方案4】：正如Zeit 所说：
-
在 /pages 文件夹的同一级别创建一个 /static 文件夹。
在该文件夹中放置您的 .css 文件
在您的页面组件中导入 Head 并将 a 添加到您的 CSS。
import Head from 'next/head'
function IndexPage()
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
export default IndexPage就是这样，这样 Next.js 应该在页面头部呈现链接标签，浏览器将下载 CSS 并应用它。
感谢Github 的 Sergiodxa 提供这个清晰的解决方案。
【讨论】：
【参考方案5】：您需要创建自定义 _document.js 文件。
添加 css 时的自定义文档如下所示：
import React from "react";
import Document, Head, Main, NextScript from "next/document";
export default class MyDocument extends Document
render()
const buildManifest = this.props;
const css = buildManifest;
return (
<html lang="fa" dir="rtl">
<Head>
css.map(file => (
<link rel="stylesheet" href=`/_next/$file` key=file />
))
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
【讨论】：
【参考方案6】：如果您使用 next.js，请执行此操作。
在根项目中创建 next.config.js
const withCSS = require('@zeit/next-css');
function HACK_removeMinimizeOptionFromCssLoaders(config)
console.warn(
'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
);
config.module.rules.forEach(rule =>
if (Array.isArray(rule.use))
rule.use.forEach(u =>
if (u.loader === 'css-loader' && u.options)
delete u.options.minimize;
);
);
module.exports = withCSS(
webpack(config)
HACK_removeMinimizeOptionFromCssLoaders(config);
return config;
,
);
别忘了重启服务器
【讨论】：
【参考方案7】：9.3以上的next，全局css写在“styles/globals.css”中，你可以导入到_app.js中
import "../styles/globals.css";
然后对于每个组件，你可以编写自己的 css 并将其导入到组件中。注意命名：nameOfFile.module.css
假设您有“product.js”组件和“product.module.css”。您想将 css 从“product.css”加载到“product.js”
import classes from "./product.module.css" // assuming it's in the same directory
您将所有类名放入product.module.css。假设您在product.module.css 中有.main-product。在product.js 内部，假设您有一个div 来设置样式
<div className=classes.main-product > </div>
借助 css 模块功能，您可以在其他组件中使用相同的 className 并且不会冲突。因为当 next.js 编译时，它会使用其模块对 className 的名称进行哈希处理。所以来自不同模块的相同类名的哈希值将是相同的
【讨论】：
【参考方案8】：如果您的应用直接使用 web 5 包，请将此设置为 false。
module.exports =
// Webpack 5 is enabled by default
// You can still use webpack 4 while upgrading to the latest version of
// Next.js by adding the "webpack5: false" flag
webpack5: false,
你可以使用 webpack 4。
yarn add webpack@webpack-4
【讨论】：
【参考方案9】：全局 CSS 必须在您的自定义 中 为什么会发生此错误 尝试从 pages/_app.js 以外的文件导入全局 CSS。
由于其副作用和排序问题，全局 CSS 不能在您的自定义以外的文件中使用。
修复它的可能方法 将所有全局 CSS 导入重新定位到您的 pages/_app.js 文件。
或者，通过 CSS 模块更新您的组件以使用本地 CSS（组件级 CSS）。这是首选方法。
例子：
// pages/_app.js
import '../styles.css'
export default function MyApp( Component, pageProps )
return <Component ...pageProps />
【讨论】：
以上是关于Next.js - 导入 css 文件不起作用的主要内容，如果未能解决你的问题，请参考以下文章
暗模式在带有 Nextjs 和 Typescript 的 Tailwind CSS V3 中不起作用
Next.JS Redux 调度在 getStaticProps() 中不起作用