@page rule is ignored when included using the import directive
To reproduce this issue, create an HTML file with the following content:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</head>
<body>
<section>
<h1>Hello</h1>
</section>
</body>
</html>
Then create two CSS files:
styles.css
@import url("common.css");
@page {
size: A4;
background-color: #f6f5f5;
}
common.css
@page {
@bottom-center {
content: "https://print-css.rocks";
font-size: 0.8em;
color: #aaa;
}
}
h1 {
font-size: 40pt;
}
Use a local HTTP server to serve the page.
As you can see in the following screenshot, the size of the title (<h1>
element) is 40pt (indicating that common.css
was correctly loaded) but the bottom center is missing:
If you replace the @import url("common.css");
directive by the content of common.css
, you will get:
(Notice the "https://print-css.rocks" mention in the footer of the page)