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

user_12487469 0
Viewed 12823

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?

next.js
3 Answers

You may remove the @zeit/next-css plugin because the Next.js 9.3 is very simple. Then Next.js 9.3 is Built-in Sass Support for Global Stylesheets after removing the @zeit/next-css you may install 

npm install sass

Then, import the Sass file within pages/_app.js.

user_41725150

Global CSS

Import any global CSS in the /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} />
}

Importing CSS in components or pages won't work with the built-in CSS support.

Component CSS

Next.js supports CSS Modules using the [name].module.css file naming convention.

components/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;
}

components/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 Module files can be imported anywhere in your application.

Third-party CSS on Component / Page level

You can use <link> tag in the component.

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

export default Foo;

The loaded stylesheet won't be automatically minified as it doesn't go through build process, so use the minified version.

If none of the options doesn't fit your requirements consider using a custom CSS loader like @zeit/next-css.

In that case you will see a warning which is fine:

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

Suggested reading:

user_59640230
  1. Install sass module by running following command.
npm install sass
  1. You then need to remove all css-loader and sass-loader configuration from next.config.js.

For example, I had to remove the withSass() function (in your case withCSS()) and just return the configuration object. Had to remove the following lines from next.config.js

{
  test: /\.scss$/,
  use: {
    loader: "sass-loader",
    options: {
      data: '@import "./scss/_variables.scss"',
      sourceMap: true,
    },
  },
}

Move your options to sassOptions in next config file.

sassOptions: {
  data: '@import "./scss/_variables.scss"',
  sourceMap: true,
}
  1. Also remove the old @zeit/next-sass and @zeit/next-css from package.json

I had to remove following @zeit dependency from my package.json

  "dependencies": {
    "@zeit/next-sass": "1.0.1",

This worked for me.

For more details, visit https://nextjs.org/docs/basic-features/built-in-css-support

user_12660510
Related