Generate a new CSS file into dist/styles

[aitor]

I have instaled mPDF library to generate PDFs from single posts. This is my Sage 9 working example. Click on the “Generate PDF” button at the bottom of the page.

Also, this is my code to generate PDF from single post.

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.

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!

[MWDelaney]

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

Sage 9 Code Splitting

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…

[aitor]

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)