I have setup a new nextjs application using create-next-app
.
And have installed postcss
, postcss-import
, postcss-mixins
, autoprefixer
packages, and added following postcss.config.js
file
module.exports = {
plugins: {
"postcss-import": {},
"postcss-mixins": {},
autoprefixer: {},
},
};
My next.config.mjs
looks like this :
import createNextIntlPlugin from "next-intl/plugin";
const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default withNextIntl(nextConfig);
and I have defined a mixin called pink in src/mixins/color.css
file like this
@mixin pink {
background-color: pink !important;
}
then this file is imported to global.css
in src/styles/global.css
and used
@import "../mixins/color.css";
body {
@mixin pink;
}
is not working. Also tried creating a mixin using @define-mixin
directive but also no luck.
Important note:
Putting invalid syntax in postcss.config.css
does not break the application.
For example :
module.exports = {
plugins: {
"postcss-import": {},
"postcss-mixins": nonExistingVar,
autoprefixer: 12 + this + Error,
},
};