我是新来的Next.js.
虽然我在_app. tsx中声明了css文件，但css文件中定义的一些样式不起作用。一些样式使用从"public/images"导入的图像，而这也没有导入。请帮助我找出问题所在。我必须更改文件夹结构吗？Next.js的版本是"13.1.1"。
提前感谢!!
我正在处理一个具有以下文件夹结构的项目。
- 公众
- 字型
- 影像
- 来源
- 页数
- 花柱
- global.css
- layout.css
my_app. tsx文件如下所示
import '@/styles/layout.css';
import '@/styles/common.css';
export default function App({ Component, pageProps }: AppProps) {
...
}
2条答案
按热度按时间j9per5c41#
我也是Nextjs的新手，原来你不能使用常规的CSS文件，你应该使用
CSS modules。您需要将每个CSS文件重命名为"global除外"，以
.module.css结尾，而不是以.css结尾，然后您需要将该文件导入到要设置样式的组件中：import styles from 'style/file.module.css'要设置元素样式，请在CSS文件中创建一个类：
.paragraph{ color:green }然后在组件中使用它：
快!
有一个标准的CSS框架叫Tailwindcss，你应该试试
nbysray52#
将CSS文件重命名为layout.module.css。在CSS文件中使用. module.css扩展名。请参考nextjs documentation以获取更多参考。