How to re-use piece of CSS like @mixin and @include with SASS ?

[sshmaxime]

Hello everyone, as the title says, how to re-use piece of CSS like @mixin and @include with Postcss ? I found this plugin: https://github.com/postcss/postcss-mixins but couldn't make it work with my setup (NextJs).

Considering the fact that NextJs comes withpostcss-preset-env is there anything I could do with that ? Seems like not but I might be missing something.

Thank you very much 🙏

[romainmenke]

Hi @sshmaxime,

I found this plugin: https://github.com/postcss/postcss-mixins but couldn't make it work with my setup (NextJs).

Can you elaborate on why this didn't work and what was wrong?

I am guessing that something like plugin is your best bet, but I don't use NextJs or SASS, so I can't speak from experience :)

[sshmaxime]

Wow, thanks for the quick answer.

I'm getting on .pcss files:

Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

On top of that I haven't find any documentation that state how to import my mixin from another file/folder. I tried to digged into the issues/pr but couldn't find anything to help with that. It seems really outdated to me.

Is there really no other solution ? I feel like mixin are such a key features of SASS, thatI don't understand how there isn't a way to do that with a popular postcss plugin.

[romainmenke]

🤔 That is a WebPack error, not a PostCSS error.
I think you need to configure WebPack so that it knows that .pcss files should be handled as PostCSS. They have a guide on that here : https://webpack.js.org/loaders/postcss-loader/

But I don't know how that works in NextJS.

---

Also important to keep in mind that PostCSS is not Sass and isn't build to handle Sass. You can use a Sass syntax plugin as part of the solution : https://github.com/postcss/postcss-scss

The plugin linked above also gives you a mixins feature but it will not be 100% compatible with Sass.

If you actually want Sass features then maybe you need actual Sass :)
It is an awesome tool.

---

how to import my mixin from another file/folder.

WebPack will import and handle each file individually, so you need to move bundling/importing to PostCSS with something like :

• postcss-import : https://www.npmjs.com/package/postcss-import
• @csstools/postcss-bundler : https://www.npmjs.com/package/@csstools/postcss-bundler
• @csstools/postcss-global-data : https://www.npmjs.com/package/@csstools/postcss-global-data

---

I think your first issue is setting up a CSS build step and given that your core parts seem to be NextJS / WebPack it might be better to reach out for support on those projects?

We mainly focus postcss-preset-env here so we don't have all the needed knowledge :)

[sshmaxime]

Thank you so much for that dedicated answer. I really really appreciate it, that's a lot of insights ! I'll make more research !