introduction

Next.js 允许你从js文件中导入CSS 文件,这是由于next.js 继承于import的概念,但是扩展至js之外 ..

增加一个全局样式

全局样式会导入到pages/_app.js …

于是我们可以创建一个styles.css将这个全局样式导入到pages/_app.js

假设下面是我们的pages/_app.js

  1. import '../styles.css'
  3. // This default export is required in a new `pages/_app.js` file.
  4. export default function MyApp({ Component, pageProps }) {
  5.   return <Component {...pageProps} />
  6. }

这些样式将会使用到所有页面和组件 … 由于全局样式的特性,并且避免冲突,它们仅仅能够导入到pages/_app.js

在开发中,样式能够编辑它们且热重载-意味着我们能够保留应用状态 ..

在生产中,所有的css文件将自动的连接到单个最小化的.css文件 ..

从node_modules导入样式

从Next.js 9.5.4开始,从node_modules中导入样式文件是允许的 …

对于全局样式,例如bootstrap或者 nprogress,可以导入到pages/_app.js中 ..

为了导入由第三方组件需要的CSS,你能够在组件中这样做 …

  1. // components/ExampleDialog.js
  2. import { useState } from 'react'
  3. import { Dialog } from '@reach/dialog'
  4. import VisuallyHidden from '@reach/visually-hidden'
  5. import '@reach/dialog/styles.css'
  7. function ExampleDialog(props) {
  8.   const [showDialog, setShowDialog] = useState(false)
  9.   const open = () => setShowDialog(true)
  10.   const close = () => setShowDialog(false)
  12.   return (
  13.     <div>
  14.       <button onClick={open}>Open Dialog</button>
  15.       <Dialog isOpen={showDialog} onDismiss={close}>
  16.         <button className="close-button" onClick={close}>
  17.           <VisuallyHidden>Close</VisuallyHidden>
  18.           <span aria-hidden>×</span>
  19.         </button>
  20.         <p>Hello there. I am a dialog</p>
  21.       </Dialog>
  22.     </div>
  23.   )
  24. }

增加组件级别的CSS

Next.js 支持 CSS Modules 模块化(通过使用[name].module.css文件命名约定即可 ..

CSS modules 是一个局部范围css(通过自动创建一个独一无二的类名),这允许你使用相同的CSS 类名在不同的文件中(而不需要担心冲突) …

这种好处使得CSS module作为包含组件级别的CSS为理想化的选择,CSS 模块化文件能够导入到应用的任何位置 ..

举个例子,考虑在components文件夹下有一个Button组件 ..

假设创建一个具有css样式的css文件

  1. /*
  2. You do not need to worry about .error {} colliding with any other `.css` or
  3. `.module.css` files!
  4. */
  5. .error {
  6.   color: white;
  7.   background-color: red;
  8. }

然后将它引用到Button组件上,导入css文件

  1. import styles from './Button.module.css'
  3. export function Button() {
  4.   return (
  5.     <button
  6.       type="button"
  7.       // Note how the "error" class is accessed as a property on the imported
  8.       // `styles` object.
  9.       className={styles.error}
  10.     >
  11.       Destroy
  12.     </button>
  13.   )
  14. }

CSS 模块是一个可选的特性,(仅仅通过.module.css扩展进行启动),常规的<link>样式表以及全局CSS文件仍然是支持的 ..

在生产环境下,所有的CSS 模块文件将自动的联接到许多最小化并且代码分割的’.css’文件中 ,这些.css文件表示应用中的热执行路径,确保最少量的CSS加载以便应用程序绘制 ….

Sass 支持

Next.js 允许你同时使用.scss以及 .sass扩展,你能够使用组件级别的Sass(通过Css模块以及.module.scss或者 .module.sass扩展

但是首先我们需要安装sass…

  1. npm install --save-dev sass

Sass支持有一些相同的好处并且限制(由于内置CSS支持) …

注意: Sass 支持两种不同的语法形式,每一个都有它们自己的扩展,这个.scss扩展需要你使用 SCSS syntax,sass扩展需要你使用 Indented Syntax (“Sass”) ..

如果你不知道选择哪一种,可以先从.scss开始(它是css的超集),并且不需要学习Indented Syntax(“Sass”)

定制Sass 选择

如果你想要配置Sass 编译器，你能够在next.config.js中配置 sassOptions

举个例子,增加包括的路径

  1. const path = require('path')
  2. module.exports = {
  3.   sassOptions: {
  4.     includePaths: [path.join(__direname,'styles')]
  5.   }
  6. }

Sass 变量

Next.js 支持Sass 变量(从Css模块文件中暴露的) ..

举个例子,使用暴露的primaryColorSass变量 …

  1. /* variables.module.scss */
  2. $primary-color: #64ff00;
  4. :export {
  5.   primaryColor: $primary-color;
  6. }

然后在页面中

  1. // pages/_app.js
  2. import variables from '../styles/variables.module.scss'
  4. export default function MyApp({ Component, pageProps }) {
  5.   return (
  6.     <Layout color={variables.primaryColor}>
  7.       <Component {...pageProps} />
  8.     </Layout>
  9.   )
  10. }

Css-in-JS

当然现在我们可以使用内联样式,这只是CSS-in-JS解决方案的一种

  1. function HiThere() {
  2.   return <p style={{ color: 'red' }}>hi there</p>
  3. }
  5. export default HiThere

我们也能够使用 styled-jsx 去提供隔离界别的CSS 样式,这意味着支持 ‘shadow CSS”,类似于Web 组件 ..不幸的是(Web组件不支持服务器渲染并且仅JS)

例如以下示例展示了styled-jsx解决方案:

  1. function HelloWorld() {
  2.   return (
  3.     <div>
  4.       Hello world
  5.       <p>scoped!</p>
  6.       <style jsx>{`
  7.         p {
  8.           color: blue;
  9.         }
  10.         div {
  11.           background: red;
  12.         }
  13.         @media (max-width: 600px) {
  14.           div {
  15.             background: blue;
  16.           }
  17.         }
  18.       `}</style>
  19.       <style global jsx>{`
  20.         body {
  21.           background: black;
  22.         }
  23.       `}</style>
  24.     </div>
  25.   )
  26. }
  28. export default HelloWorld

同样还有其他的CSS-in-JS解决方案(例如 Styled Components) …

FAQ

  • js禁用的情况下使用

在生产构建下next startcss 仍然会被加载,在开发阶段,我们需要js启动去提供最好的开发者体验(使用快速刷新))