# Generate a new CSS file into dist/styles

**URL:** https://discourse.roots.io/t/generate-a-new-css-file-into-dist-styles/12715
**Category:** sage
**Tags:** webpack, sage9
**Created:** 2018-06-18T20:03:48Z
**Posts:** 3

## Post 1 by @aitor — 2018-06-18T20:03:48Z

I have instaled mPDF library to generate PDFs from single posts. [This is my Sage 9 working example](https://stage.superbiajuridico.es/articles/la-busqueda-del-enfrentamiento-personal-entre-los-progenitores-no-puede-ser-causa-de-desestimacion-de-la-custodia-compartida/). Click on the “ **Generate PDF** ” button at the bottom of the page.

Also, [this is my code to generate PDF from single post](https://bitbucket.org/aitormendez/superbiajuridico/src/master/web/app/themes/sj/resources/views/partials/single-pdf.blade.php).

My problem is that, for use custom fonts in the PDF, I must to insert the CSS from a file, something like this:

`$mpdf->WriteHTML(file_get_contents('web/app/thems/sj/dist/styles/single-pdf.css'), 1);`

[As mPDF docs said](https://mpdf.github.io/reference/mpdf-functions/writehtml.html).

I have no idea about how to generate a separate CSS file inside `dist/styles` with Webpack in order to make it available from a template. Any indication will be welcome while I learn basic webpack rudiments and understand its implementation in Sage. The learning curve is very expensive! Thank you!

---

## Post 2 by @MWDelaney — 2018-06-18T20:32:30Z

You’d use the same process outlined here, but with a `.scss` file rather than a `.js` file:

> [@Sage 9 Code Splitting](https://discourse.roots.io/t/sage-9-code-splitting/12682/2):
>
> I think you could create a new entry in resources/assets/config.json to build a page-specific bundle and set up a page-specific enqueue the normal WordPress way. It’s not quite the same thing, but I wrote about how to do this with stylesheets here: Essentially you’ll add the entry like this: theme-name/resources/assets/config.json { "entry": { "main": ["./scripts/main.js", "./styles/main.scss"], "heavypage": ["./scripts/heavypage.js"], "customi…

---

## Post 3 by @aitor — 2018-06-19T09:00:32Z

Ok, I have now a separated `dist/style/single-pdf.css` file.

How must I call it from a template? It is not a normal enqueue. To parse CSS to PDF It must be something like:

```
$mpdf->WriteHTML(file_get_contents('app/themes/sj/dist/styles/single-pdf.css'), 1);
```

But its name changes regarding scenario:

**yarn start** : there is no style folder into dist folder.

**yarn build** : `single-pdf.css`

**yarn build:production** : `single-pdf_2b858290.css`

(by the moment, it works just with `yarn build`)