Next.js 警告：由于检测到自定义CSS配置，正在禁用内置CSS支持

我正在尝试导入“../../node\u modules/react quill/dist/quill.snow.css”在我的next.js项目中，但我得到以下错误

[ error ] ./node_modules/react-quill/dist/quill.snow.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
Location: components\crud\BlogCreate.js

但现在我得到一个警告

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

看来我的解决办法不是解决这个问题的最好办法。如何消除此警告？

Global CSS 在

/pages/_app.js

中导入任何全局CSS

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

组件/Button.js

建议如下：

---

您可以删除

@zeit/next css

插件，因为next.js 9.3非常简单。然后，Next.js 9.3在删除您可以安装的

@zeit/Next css

之后

npm install sass

---

然后，在

pages/_app.js

中导入Sass文件，这取决于您想要做什么。它是一个全局CSS还是一个页面/组件的CSS？现在是一个组件的CSS。也许以后所有与这个组件@NikolaiKiselevAnd相关的组件都会出现，还有一件事很奇怪，当我发布这个帖子时，我的项目正在运行，除了警告。但添加一些功能后，我无法访问路由。它没有显示任何错误，只是在加载。当我删除这些功能时，同样的问题也会发生。我不能进入前一阶段，我试着解释最常见的案例。Next.js不支持在组件中导入CSS，除非它是

CSS模块

。如果您仍然需要在组件级别导入CSS，您可以使用自定义加载程序，就像您使用

@zeit/next CSS

一样，或者在渲染中使用常规的
。谢谢。在我的例子中，我只需删除

@zeit/next css

，它就可以工作了。我不必安装

sass

，因为我使用的是纯CSS文件。很多坦克！我没有任何sass文件可以导入@fool-dev。我的主要目的是将“../../node\u modules/react quill/dist/quill.snow.css”导入到我的component1.js（component）中。但是我不知道如何在pages/_app.js上使用它？假设在pages/_app.js中，我导入“../../node_modules/react quill/dist/quill.snow.css”，那么如何将我的component1.js作为子组件或包装组件传递给_app.js以获得该样式？@najmunahar很好，您不需要安装sass，但必须删除其他zeit插件，如css

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

import styles from './Button.module.css'

export function Button() {
    return (
        <button
            type="button"
            // Note how the "error" class is accessed as a property on the imported
            // `styles` object.
            className={styles.error}
        >
            Destroy
        </button>
    )
}

const Foo = () => (
    <div>
        <link 
            href="third.party.css" 
            rel="stylesheet"
        />
    </div>
);

export default Foo;

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

npm install sass