Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected

Question

I am trying to import "../../node_modules/react-quill/dist/quill.snow.css"; in my next.js project but I get following error

[ 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

I managed to make it work with next.config.js. It worked with this configuration

// next.config.js 
const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
});

But now I am getting a warning,

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

It seems my solution is not the best way to solve this problem. How could I get rid of this warning?

Answer 1

您可以删除该@zeit/next-css插件，因为 Next.js 9.3 非常简单。然后 Next.js 9.3 是内置 Sass 支持全局样式表后删除@zeit/next-css您可以安装

npm install sass

然后，导入 .sass 文件pages/_app.js。

Answer 2

全球CSS

导入/pages/_app.js.

import '../styles.css'

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

在组件或页面中导入 CSS 无法使用内置 CSS 支持。

组件CSS

Next.js 使用文件命名约定支持 CSS 模块[name].module.css。

组件/Button.module.css

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
    color: white;
    background-color: red;
}

组件/Button.js

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

CSS 模块文件可以导入应用程序中的任何位置。

组件/页面级别的第三方 CSS

<link>您可以在组件中使用标签。

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

export default Foo;

加载的样式表不会自动缩小，因为它不经过构建过程，因此请使用缩小版本。

如果没有一个选项不符合您的要求，请考虑使用自定义 CSS 加载器，例如@zeit/next-css。

在这种情况下，您会看到一条警告，这很好：

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

建议阅读：

• Next.js 内置 CSS 支持
• 全球SASS
• CSS 模块