Fix css loading order in head (#2785)

The `custom.css` file should be loaded last to take precedence over the
default file. Otherwise, the theming will not work as expected, and you
would have to use `!important` most of the time.
This commit is contained in:
Robert Kaussow 2023-11-09 14:13:11 +01:00 committed by GitHub
parent 6f07f2acf2
commit 65a93ca547
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 1 deletions

View file

@ -8,7 +8,6 @@
<meta name="theme-color" content="#65a30d" />
<title>Woodpecker</title>
<script type="" src="/web-config.js"></script>
<link rel="stylesheet" href="/assets/custom.css" />
</head>
<body>
<div id="app"></div>

View file

@ -25,6 +25,24 @@ function woodpeckerInfoPlugin() {
};
}
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform() {
return [
{
tag: 'link',
attrs: { rel: 'stylesheet', type: 'text/css', href: '/assets/custom.css' },
injectTo: 'head',
},
];
},
},
};
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
@ -93,6 +111,7 @@ export default defineConfig({
Components({
resolvers: [IconsResolver()],
}),
externalCSSPlugin(),
woodpeckerInfoPlugin(),
prismjs({
languages: ['yaml'],