Next.js-导入CSS文件不起作用
Arg*_*bie 11 javascript reactjs next.js
我正在创建一个带有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
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"
}
}
问题：
1. Chrome中存在“未捕获的SyntaxError”错误，但似乎并不影响页面的呈现。但是我仍然想知道原因和解决方案。chrome中的index.js错误低于img
2.如Chrome中所示，没有“ example”类，这意味着未加载style.css文件。我有什么想念的吗？chrome中没有CSS文件
提前致谢。
cr0*_*9xx 13
对于来到这里的任何人来说，新的 Next JS 开箱即用地支持 CSS。问题是对于模块（组件），它们必须被命名为组件。因此，如果目录中有标头components，则必须将其命名为header.module.css
mtl*_*mtl 11
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:
npm install --save @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:
您还需要_document.js在pages文件夹中创建一个文件，然后链接到已编译的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，这是上面代码中标记中的href属性值link。
对于第一个问题，可能是Chrome无法理解导入语法。尝试在其中启用“ 实验性Web平台”标志chrome:flags，看看是否可以解决它。
- 这不正是他的代码中的内容吗？我找不到区别。我遵循了相同的步骤，但它对我不起作用 (2认同)