Add warning when built-in CSS/SCSS support is disabled (vercel#10942)

errors/built-in-css-disabled.md

@@ -0,0 +1,18 @@
+# Built-in CSS Support Disabled
+
+#### Why This Error Occurred
+
+Custom CSS configuration was added in `next.config.js` which disables the built-in CSS/SCSS support to prevent conflicting configuration.
+
+A legacy plugin such as `@zeit/next-css` being added in `next.config.js` can cause this message.
+
+#### Possible Ways to Fix It
+
+If you would like to leverage the built-in CSS/SCSS support you can remove any custom CSS configuration or any plugins like `@zeit/next-css` or `@zeit/next-sass` in your `next.config.js`.
+
+If you would prefer not to leverage the built-in support you can ignore this message.
+
+### Useful Links
+
+- [Built-in CSS Support docs](https://nextjs.org/docs/basic-features/built-in-css-support)
+- [Custom webpack config docs](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config)

packages/next/build/webpack-config.ts

@@ -1,3 +1,4 @@
+import chalk from 'chalk'
 import crypto from 'crypto'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 import path from 'path'
@@ -963,6 +964,17 @@ export default async function getBaseWebpackConfig(
       ) ?? false
 
     if (hasUserCssConfig) {
+      // only show warning for one build
+      if (isServer) {
+        console.warn(
+          chalk.yellow.bold('Warning: ') +
+            chalk.bold(
+              'Built-in CSS support is being disabled due to custom CSS configuration being detected.\n'
+            ) +
+            'See here for more info: https://err.sh/next.js/built-in-css-disabled\n'
+        )
+      }
+
       if (webpackConfig.module?.rules.length) {
         // Remove default CSS Loader
         webpackConfig.module.rules = webpackConfig.module.rules.filter(

test/integration/css-customization/test/index.test.js

@@ -83,11 +83,15 @@ describe('Legacy Next-CSS Customization', () => {
   })
 
   it('should compile successfully', async () => {
-    const { code, stdout } = await nextBuild(appDir, [], {
+    const { code, stdout, stderr } = await nextBuild(appDir, [], {
       stdout: true,
+      stderr: true,
     })
     expect(code).toBe(0)
     expect(stdout).toMatch(/Compiled successfully/)
+    expect(stderr).toMatch(
+      /Built-in CSS support is being disabled due to custom CSS configuration being detected/
+    )
   })
 
   it(`should've compiled and prefixed`, async () => {