Next.js - 导入 css 文件不起作用 [英] Next.js - import css file does not work
问题描述
我正在用react、redux和next.js创建一个项目，想在js中导入CSS文件.
我按照 中的更多内容.
从 Next.js 7 开始，支持导入 .css 文件所需要做的就是注册 withCSS 插件在你的 next.config.js 中.首先将插件安装为开发依赖项:
npm install --save-dev @zeit/next-css然后在你的项目根目录中创建 next.config.js 文件并添加以下内容:
//next.config.jsconst withCSS = require('@zeit/next-css')module.exports = withCSS({/* 我的下一个配置 */})您可以通过创建一个简单的页面并导入一些 CSS 来测试它是否有效.首先创建一个 CSS 文件:
//./index.css分区 {颜色:番茄；}然后使用 index.js 文件创建 pages 文件夹.然后你可以在你的组件中做这样的事情:
//./pages/index.js导入../index.css"导出默认 () =><div>欢迎来到 next.js 7！</div>您还可以使用带有几行配置的 CSS 模块.有关这方面的更多信息，请查看 nextjs.org/docs/#css 上的文档.
已弃用:Next.js <7:
您还需要在 pages 文件夹中创建一个 _document.js 文件并链接到已编译的 CSS 文件.试试下面的内容:
//./pages/_document.js导入文档，{ Head, Main, NextScript } from 'next/document'导出默认类 MyDocument 扩展 Document {使成为() {返回 (<html><头><link rel="样式表";href="/_next/static/style.css";/></头><身体><主要/><下一个脚本/></身体></html>)}}样式表被编译为.next/static/style.css，这意味着CSS文件是从/_next/static/style.css提供的，即上面代码中link标签中href属性的值.
至于第一个问题，可能是 Chrome 不理解导入语法.尝试在 chrome:flags 中启用 Experimental Web Platform 标志，看看是否可以解决.
I am creating a project with react, redux and next.js, and want to import CSS files in js.
I followed instructions in next.js/#css and next-css, but find out that CSS styles do not work.
My code is as follow:
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
next.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"
}
}
Questions:
1. There is an "Uncaught SyntaxError" in Chrome, but it seems to not affect the rendering of the page. But I still wondering the reason and the solution. index.js error in chrome is below img
2. As shown in Chrome, there's no "example" class, which means the style.css file is not loaded. Am I missing anything? no CSS file in chrome
Thanks in advance.
EDIT 2: As of Next.js > 10, you can import a global CSS file into _app.js, and you can use CSS modules in your components. More in the Next.js docs.
EDIT: As of Next.js 7, all you have to do to support importing .css files is to register the withCSS plugin in your next.config.js. Start by installing the plugin as dev dependency:
npm install --save-dev @zeit/next-css
Then create the next.config.js file in your project root and add the following to it:
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})
You can test that this is working by creating a simple page and importing some CSS. Start by creating a CSS file:
// ./index.css
div {
color: tomato;
}
Then create the pages folder with an index.js file. Then you can do stuff like this in your components:
// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>
You can also use CSS modules with a few lines of config. For more on this check out the documentation on nextjs.org/docs/#css.
Deprecated: Next.js < 7:
You'll also need to create a _document.js file in your pages folder and link to the compiled CSS file. Try it out with the following content:
// ./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>
)
}
}
The stylesheet is compiled to .next/static/style.css which means that the CSS file is served from /_next/static/style.css, which is the value of the href attribute in the link tag in the code above.
As for the first question, it's probably Chrome not understanding the import syntax. Try to enable the Experimental Web Platform flag in chrome:flags and see if that solves it.
这篇关于Next.js - 导入 css 文件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
