Next.js项目中导入CSS文件无效问题求助

嘿，我之前也碰到过一模一样的情况！咱们一步步排查，把问题解决掉：

1. 先确认依赖是否正确安装 #

首先得确保你已经装了@zeit/next-css这个依赖。如果还没安装，先执行下面的命令：

npm install @zeit/next-css
# 用yarn的话就执行这个
yarn add @zeit/next-css

2. 检查next.config.js的配置是否正确 #

如果你的项目还用到了其他Next.js插件（比如withRedux），得把它们嵌套组合起来，不能单独导出。举个例子：

const withCSS = require('@zeit/next-css');
const withRedux = require('next-redux-wrapper');

module.exports = withCSS(withRedux({
  // 这里可以加你的其他Next.js配置，比如target、环境变量等
}));

要是没有其他插件，也得确保配置文件是正确的写法（别漏了括号）：

const withCSS = require('@zeit/next-css');
module.exports = withCSS();

3. 验证CSS文件路径和类名是否正确 #

• 你写的../style.css意味着CSS文件要和pages文件夹在同一级目录，如果CSS文件放在styles文件夹里，路径得改成../styles/style.css。
• 还要确认style.css里的.example类是正确定义的，比如：

.example {
  color: #ff0000;
  font-size: 2rem;
  padding: 1rem;
}

4. 考虑Next.js版本兼容性 #

如果你的Next.js版本是9.3及以上，官方其实已经内置了CSS支持，根本不需要@zeit/next-css插件了！你可以试试：

• 卸载@zeit/next-css依赖
• 删除next.config.js里的相关配置
• 保留import "../style.css"的导入语句，重启开发服务器看看

5. 清除缓存试试 #

有时候旧缓存会导致样式不生效，你可以：

• 删除项目根目录下的.next文件夹
• 重新启动开发服务器（npm run dev）

附上你提供的代码供参考：

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()

内容的提问来源于stack exchange，提问作者ArgenBarbie