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

[saresh-krish]

Hi,
I am using NextJs 9.3.4, when i run the app i am facing problem
"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"
so in some time external style is not rendering properly and we give to hard reload then the styles work properly .
How to solve this problem??
I need to use external components style for there particular components.
how to use external style CSS and SaSS in next.config.js file.

Thanks
Saresh.B

[saresh-krish]

Hello

Bug report

Describe the bug

Nextjs CSS & SASS in next.config.js

To Reproduce

I am working on NextJs 9.3.4, when i run the app i am facing problem
"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"
so in some time external style is not rendering properly and we give to hard reload then the styles work properly .
How to solve this problem??
I need to use external components style for there particular components.
how to use external style CSS and SaSS in next.config.js file.

Expected behavior

Styles(CSS & SASS) will be work on individual components

System information

• OS: Ubuntu 18.04.3 LTS
• Browser (if applies): chrome, Mozilla
• Version of Next.js: 9.3.4
• Version of Node.js: 10.16.3

Additional context

Some times styles are not loaded and we need to hot reload it is work fine.
#12244 (comment)

[timneutkens]

As asked for "Can you provide all your configuration?" You did not include package.json, next.config.js or any other files from your project.

[saresh-krish]

hi Timneutkens
I do not have code in git. i share my package json & next.config.js files
package.json
{ "name": "saresh", "version": "1", "description": "Vendor Onboarding", "main": "index.js", "author": "saresh", "license": "MIT", "private": true, "dependencies": { "@ant-design/icons": "latest", "@zeit/next-css": "^1.0.1", "@zeit/next-sass": "^1.0.1", "accesscontrol": "^2.2.1", "antd": "^4.1.2", "bcryptjs": "^2.4.3", "body-parser": "^1.19.0", "clipboard": "^2.0.4", "connect-pg-simple": "^6.1.0", "cookie-parser": "^1.4.5", "cors": "^2.8.5", "draft-js": "^0.11.5", "draftjs-to-html": "^0.9.1", "express": "^4.17.1", "express-session": "^1.16.2", "express-winston": "^3.3.0", "formik": "^2.1.4", "immutable": "^4.0.0-rc.12", "jsonwebtoken": "^8.5.1", "mkdirp": "^0.5.1", "morgan": "^1.9.1", "multer": "^1.4.2", "next": "^9.3.4", "next-fonts": "^1.0.3", "next-seo": "^4.4.0", "nextjs-fonts": "^0.22.0", "node-sass": "^4.13.1", "nodemailer-ntlm-auth": "1.0.1", "null-loader": "^3.0.0", "passport": "^0.4.0", "passport-jwt": "^4.0.0", "passport-local": "^1.0.0", "pg": "^8.0.0", "proxy": "1.0.1", "proxy-test-server": "1.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-draft-wysiwyg": "^1.14.5", "react-helmet": "^6.0.0", "react-icons": "^3.9.0", "react-phone-input-2": "^2.13.3", "sinon": "9.0.1", "smtp-server": "3.6.0", "uuid": "^3.4.0", "webpack": "^4.43.0", "winston": "^3.2.1" }, "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js" }, "devDependencies": { "babel-plugin-import": "^1.12.1", "eslint": "^6.1.0", "eslint-plugin-react": "^7.14.3" }, "eslintConfig": { "extends": "react-app" } }

next.config.js

`const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withFonts = require("next-fonts");

module.exports = withCss(
withSass(
withFonts({
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd/.?/style/css.?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === "function") {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === "function" ? [] : origExternals)
];
config.module.rules.push({
test: /.svg$/,
use: ["@svgr/webpack"]
},
{
test: /.(png|jpg|gif|svg|eot|otf|ttf|woff|woff2)$/,
use: {
loader: "url-loader"
}
}

      );
      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
 
    }
    return config;
  },
  serverRuntimeConfig: { 
    NODE_ENV: process.env.NODE_ENV,
  }, 

  publicRuntimeConfig: {
     NS_API: process.env.NS_API
  }
})

)
);`

my main problem is external component based styles is not loading properly
Ex:

• -Test Folder
  --------index.jsx
  -------- style.css

I have include the 'stlye.css' into 'index.jsx'. When i run app first time the 'style.css' is not loading. In same as 'Sass' file also.

Thanks
B.Saresh

[saresh-krish]

Hi Timneutkens

Any updated for this problem solution.

Thanks
B.Saresh