In my Next.JS app I import my stylesheet in _app.js like this:
import '../public/css/Index.css';
Index.css contains this:
.index-container {
margin: 20px auto 0;
}
How do I solve the error message:
./src/public/css/Index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./src/public/css/Index.css) Warning
Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.
This was an issue due to some incompatibility between browserslist and the bundled version of postcss-preset-env with v9.4.4.
Updating to v9.5.0 should solve it.
Your issue can be solved package.json by applying code below:
"browserslist": {
"production": [
">0.3%",
"not ie 11",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
">0.3%",
"not ie 11",
"not dead",
"not op_mini all"
]
}
After you have made these changes restart your server. you will no longer get this warning.
I had to change both production and dev items as follows and this worked.
"browserslist": {
"production": [
">0.3%",
"not ie 11",
"not dead",
"not op_mini all"
],
"development": [
">0.3%",
"not ie 11",
"not dead",
"not op_mini all"
]
},
Updating all installed packages sovled the issue.