CODEWITHSUNDEEP
csssveltesveltekit
user2051770
user2051770

Reputation: 764

css in <style> block not applied on build

I have a new Svelte app using Sveltekit, skeleton project. I create a component with a single div and attempt to set a background image. I am using adapter-static to generate a static site on build. If inline the css on the div, it works fine. If I create a class in the <style> block of the component then the styles do not load.

  1. The component:
<div class="foo-test" 
     style="width: 500px; height: 500px; background-image: url('circle.png');">
</div>
  1. npm run build. files created:

enter image description here

  1. it works:

enter image description here

  1. change the component to use css in <style> block:
<div class="foo-test"></div>
<style>
.foo-test {
    width: 500px;
    height: 500px;
    border: 2px solid black;
    background-image: url("circle.png");
}
</style>
  1. build again. files created. No css applied:

enter image description here

My svelte.config.js:

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        prerender: {
            default: true
        }
    }
};

export default config;

Am I missing a step to the process? New to Svelte. TIA

Edits:

app.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="" />
        <link rel="icon" href="%svelte.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %svelte.head%
    </head>
    <body>
        <div>%svelte.body%</div>
    </body>
</html>

Edit2: I should note, it works correctly then running in dev npm run dev and launch browser to http://localhost:3000/. only the index.html file generated from the adapter-static is not working properly when I open the file in the browser file:///C:/Repos/foo/foo/build/index.html

Upvotes: 4

Views: 2018

Answers (1)

wrgrs
wrgrs

Reputation: 2569

It is possible that you are deploying to Github Pages and you have not included a .nojekyll file. I saw this behaviour and resolved it by adding .nojekyll in the /static directory.

It appears that Jekyll does not recognise the directories with a leading underscore.

If using gh-pages to deploy, you also need to use the --dotfiles options to ensure that the file is pushed.

Note: I still don't see that loading the built files directly works locally, but I am not sure that that would be expected behaviour.

Upvotes: 0

Related Questions