时间戳

首页 > 解决方案 > nextjs“无法编译页面/_app.js”如何解决

next.js - nextjs“无法编译页面/_app.js”如何解决

问题描述

如何修复它，它在编译时发生

在此处输入图像描述

标签： next.js

解决方案

这是 Next.js 团队针对您的问题的官方文档： https ://nextjs.org/docs/basic-features/built-in-css-support

您需要在_app.js文件中导入全局 CSS 才能在您的应用程序中全局使用它。

例如，像这样使用 Tailwind CSS 作为全局：

// your _app.js file
// import your CSS file you want to use globally here
import 'tailwindcss/tailwind.css';

const CustomApp = ({ Component, pageProps }) => (
    <Component {...pageProps} />
);

export default CustomApp;

如果您只想对特定组件使用 CSS，请使用module CSS. 在构建生产版本时对捆绑文件进行代码拆分会很有帮助。

仅对您的组件使用模块化 CSS 的示例：

import styles from './index.module.scss';

const YourComponent = () => {
  return <div className={styles.example}>...</div>;
};

export default YourComponent;

对于需要从node_modules. node_modules您可以从特定组件内部导入该 CSS 文件。

例如：

import { FC } from 'react';
import Slider from 'react-slick';

import 'react-slick/css/slick.css';
import 'react-slick/css/slick-theme.css';

const SlickSlider: FC<any> = ({ children, ...restProps }) => {
  return <Slider {...restProps}>{children}</Slider>;
};

export default SlickSlider;

推荐阅读