# How to make PostCSS recognize Hugo Module imports?

**URL:** <https://discourse.gohugo.io/t/how-to-make-postcss-recognize-hugo-module-imports/44633>\
**Category:** support\
**Tags:** modules, postprocess, typesetting\
**Created:** [May 31, 2023, 2:36am UTC](https://discourse.gohugo.io/t/how-to-make-postcss-recognize-hugo-module-imports/44633 "2023-05-31T02:36:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![UtkarshVerma](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/utkarshverma/32/11273_2.png) [@UtkarshVerma](https://discourse.gohugo.io/u/UtkarshVerma)\
**Post date:** [May 31, 2023, 2:36am UTC](https://discourse.gohugo.io/t/how-to-make-postcss-recognize-hugo-module-imports/44633/1 "2023-05-31T02:36:57Z")

</div>

I have written a custom PostCSS plugin which sits inside a Hugo module. Ideally, I would prefer to simply add the module in the config and have everything work. However, what I have noticed is that the `postcss.config.js` in the site can not access the module’s custom PostCSS plugin. I believe this is because Hugo modules are mounted in a virtual file system.

My use case is a neat KaTeX integration. I would like to pass the HTML files generated by Hugo to the plugin, at the end of the build (using `resources.PostProcess`) and have it inject Math symbols in the HTML files. I know it is a bit hacky to use `postcss` for this, but I really like the simplicity of this method.

---

<div class="post-metadata">

**Author:** ![Georg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/georg/32/21486_2.png) [@Georg](https://discourse.gohugo.io/u/Georg)\
**Post date:** [May 31, 2023, 4:39pm UTC](https://discourse.gohugo.io/t/how-to-make-postcss-recognize-hugo-module-imports/44633/2 "2023-05-31T16:39:50Z")

</div>

I’m sorry I can’t help you with your module problem. But I like your idea to use KaTeX directly on the server. This should speed up pages with a large amount of LaTeX.

---

<div class="post-metadata">

**Author:** ![UtkarshVerma](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/utkarshverma/32/11273_2.png) [@UtkarshVerma](https://discourse.gohugo.io/u/UtkarshVerma)\
**Post date:** [June 2, 2023, 5:46am UTC](https://discourse.gohugo.io/t/how-to-make-postcss-recognize-hugo-module-imports/44633/3 "2023-06-02T05:46:34Z")

</div>

Any ideas anyone?

I made a Hugo module for KaTeX which is here:

> **[hugo-modules/katex at main · UtkarshVerma/hugo-modules](https://github.com/UtkarshVerma/hugo-modules/tree/main/katex)**
>
> main/katex

My final goal is to have `postcss.config.js` access files from the modules, [`assets/postcss/katex.js`] in this case. It only works if I copy the file and paste it in the theme directory.

Here is my `postcss.config.js`:

```js
const purgeCSS = require("@fullhuman/postcss-purgecss")({
	content: ["./hugo_stats.json"],
	safelist: {
		standard: ["active", "collapsing", "modal-backdrop", "show"],
		deep: [/^chroma$/],
	},
	defaultExtractor: (content) => {
		const elements = JSON.parse(content).htmlElements;
		return elements.tags.concat(elements.classes, elements.ids);
	},
});

const katex = require("./assets/postcss/katex");

module.exports = {
	plugins: [
		require("autoprefixer"),
		...(process.env.HUGO_ENVIRONMENT === "production" ? [purgeCSS, katex] : []),
	],
};

```