Next.js-CSS支持

在Next.js中，可以轻松地使用CSS来样式化您的应用程序，无需任何额外的配置。这是通过内置的CSS模块支持来实现的，通过这种方式，可以确保每个组件都具有自己的CSS作用域。

使用CSS模块

要使用CSS模块，请从文件名中导入CSS文件，这将使Next.js自动启用CSS模块支持。例如，如果您有一个名为styles.css的CSS文件，您可以在组件中像这样导入它：

import styles from './styles.css'

然后，您可以将styles对象中的类名作为className属性传递给您的元素。例如：

import styles from './styles.css'

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, world!</h1>
    </div>
  )
}

全局CSS

如果您需要在整个应用程序中使用全局CSS，您可以在pages/_app.js文件中添加一个全局CSS文件。例如，如果您有一个全局CSS文件global.css，您可以在_app.js中像这样导入它：

import '../styles/global.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

这将使global.css中的样式应用于所有页面。请注意，您只需要导入CSS文件，而不需要将其从文件名中导入。

Sass和Less

除了普通的CSS文件，Next.js还支持Sass和Less。要使用Sass或Less，请从.scss或.less文件中导入样式，而不是从.css文件中导入。例如，如果您有一个名为styles.scss的Sass文件，您可以像这样在组件中导入它：

import styles from './styles.scss'

您还需要在安装Sass或Less的情况下更新您的next.config.js文件。例如，如果您使用Sass：

const withSass = require('@zeit/next-sass')

module.exports = withSass({
  /* 配置选项 */
})

总结

通过内置的CSS模块支持，Next.js使得在React应用程序中使用CSS变得非常简单。您可以轻松地使用CSS模块，全局CSS，Sass和Less来样式化您的应用程序。