如何在 Next.js 应用程序中的任何位置导入 .scss 文件？

Question

我想将纯 React 应用程序转换为 NextJs 应用程序。在 React 应用程序中，我在组件的多个位置导入 .scss CSS 文件。将代码移至 Next.js 环境后，它显示错误：

无法从 Custom 以外的文件导入全球 CSS。由于样式表的全局性质，为了避免冲突，请将所有第一方全局 CSS 导入移至pages/_app.js。或者将导入转换为组件级 CSS（CSS 模块）。

我希望我的 CSS 作为全局 CSS 导入到它们的位置。

任何配置在这里有帮助吗？

Answer 1

在您的 Next.js 项目中，您有styles一个包含global.css文件的文件夹，如果您想创建特定的样式文件并将其导入文件中的任何位置，您应该将其命名为*.module.scss并将其导入到所需的目的地

import Classes from 'styles/test.module.css';


//usange


<div className={Classes.yourClassName}>

</div>