Next.js 允许你在 JavaScript 文件中导入 CSS 文件。
因为 Next.js 扩展了 JavaScript 中的 import
的概念。
要将样式表添加到你的应用程序中,请在 pages/_app.js
文件中导入(import)CSS 文件。
例如,假设有以下样式表 styles.css
:
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
创建一个 pages/_app.js
file 文件,如果它不存在的话。
然后 import
该 styles.css
文件。
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
这些样式 (styles.css
) 将应用于你的应用程序中的所有页面和组件。
由于样式表的全局特性,为了避免冲突,你应该只在 pages/_app.js
文件中导入样式表。
在开发中,以这种方式表示样式可让你在编辑样式时对其进行热重载,这意味着你可以保持应用程序的状态。
在生产环境中,所有 CSS 文件将自动合并为一个经过精简的 .css
文件。
node_modules
导入样式如果你想从 node_modules
导入 CSS 文件,你必须在 pages/_app.js
中进行。
Next.js 通过 [name].module.css
文件命名约定来支持 CSS Modules 。
CSS Modules 通过自动创建唯一的类名从而将 CSS 限定在局部范围内。 这使你可以在不同文件中使用相同的 CSS 类名,而不必担心冲突。
此行为使 CSS Module 成为包含组件级 CSS 的理想方法。 CSS Module 文件可以导入到应用程序中的任何位置。
例如,假设 components/
目录下有一个可重用 Button
组件:
首先,创建 components/Button.module.css
文件并填入以下内容:
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
color: white;
background-color: red;
}
然后,创建 components/Button.js
文件,导入并使用上述 CSS 文件:
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
CSS Modules 是一项可选功能,仅对带有 .module.css
扩展名的文件启用。
普通的 <link>
样式表和全部 CSS 文件仍然是被支持的。
在生产环境中,所有 CSS Module 文件将被自动合并为多个经过精简和代码分割的 .css
文件。
这些 .css
文件代表应用程序中的热执行路径,从而确保为应用程序绘制页面加载所需的最少的 CSS。
Next.js 允许你导入具有 .scss
和 .sass
扩展名的 Sass 文件。
你可以通过 CSS Modules以及 .module.scss
或 .module.sass
扩展名来使用组件级的 Sass。
在使用 Next.js 的内置 Sass 支持前,请确保安装了 sass
:
npm install sass
对 Sass 的支持与上述内置 CSS 的支持具有相同的好处和限制。 Sass support has the same benefits and restrictions as the built-in CSS support detailed above.
注意: Sass支持两个不同的语法,每个都有自己的扩展名。
.scss
扩展需要你使用SCSS语法。 而.sass
扩展名要求你使用缩进语法 ("Sass")。如果你不确定选择哪一个,请从
.scss
扩展开始,它是CSS的超集,不需要学习缩进语法 ("Sass")。
如果要配置 Sass 编译器,可以使用 next.config.js
文件中的 sassOptions
参数进行配置。
例如,添加 includePaths
:
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
如需支持 .less
或 .styl
文件,可以使用如下插件:
如果使用 less 插件,请不要忘记添加 less 依赖,否则将看到类似以下的错误:
Error: Cannot find module 'less'
可以使用任何现有的 CSS-in-JS 解决方案。 最简单的一种是内联样式:
function HiThere() {
return <p style={{ color: 'red' }}>hi there</p>
}
export default HiThere
我们包含了 styled-jsx 以支持范围隔离的 CSS。 目的是支持类似于 Web 组件的 "shadow CSS",但不幸的是不支持服务器端渲染且仅支持 JS。
有关其他流行的 CSS-in-JS 解决方案(如样式化组件),请参见以上示例。
使用 styled-jsx
的组件看起来像这样:
function HelloWorld() {
return (
<div>
Hello world
<p>scoped!</p>
<style jsx>{`
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
`}</style>
<style global jsx>{`
body {
background: black;
}
`}</style>
</div>
)
}
export default HelloWorld
请参阅styled-jsx 文档以获取更多示例。
是的,如果禁用了 JavaScript,CSS 仍然会被加载到产品构建中(next start
)。在开发过程中,我们需要启用 JavaScript,以提供最佳的开发体验与快速刷新。
以下是我们建议接下来需要学习的内容: