#Inlining style in prod

7 messages · Page 1 of 1 (latest)

fading haven
#

@arctic patrol this doesn't work in production

<link
        rel='stylesheet'
        href='node_modules/@glidejs/glide/dist/css/glide.core.min.css'
    />
    <link
        rel='stylesheet'
        href='node_modules/@glidejs/glide/dist/css/glide.theme.min.css'
    />

I get the errors

Failed to load resource: the server responded with a status of 404 ()
glide.theme.min.css:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()
glide.core.min.css:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()
glide.theme.min.css:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()

which apparently means the styles aren't getting imported in production... but works in dev..how might one fix this?

arctic patrolBOT
#

Hi @fading haven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, it seems that you're encountering a common issue with Astro where styles or assets are not properly linked or imported in the production build. This issue has been reported in various forms, such as with Tailwind CSS, CSS imports with relative paths, and even with images and other assets.

One potential solution, as suggested in this comment (https://github.com/withastro/astro/issues/740), is to ensure that your build command is being run on your hosting platform. This might involve specifying it in your package.json file.

Another user suggested moving the style folder into src and using Astro.resolve to resolve the relative path. Here's the code snippet they provided:

<link
    rel="stylesheet"
    href={Astro.resolve('../style/global.css')}>

However, these solutions might not work for all cases. If you're still encountering issues, it would be best to raise an issue on the Astro GitHub repository (https://github.com/withastro/astro/issues) to get help from the Astro community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wild plume kapa.ai is still learning and improving, please let us know how it did by reacting below

fading haven
#

So @arctic patrol how would you resolve and load relative paths inside link href

<link
        rel='stylesheet'
        href='../styles/glide.core.min.css'
    />
    <link
        rel='stylesheet'
        href='../styles/glide.theme.min.css'
    />
arctic patrolBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In Astro, you can use the Astro.resolve() function to resolve relative paths. However, this function is not available for use within HTML tags like <link>.

For stylesheets, Astro recommends two methods:

  1. ESM Import (Recommended): If your CSS file lives inside of the src/ directory, and you want automatic CSS build and optimization features, you can use an ESM import. Astro detects these CSS imports and then builds, optimizes, and adds the CSS to the page automatically. Here's an example:
import '../styles/glide.core.min.css';
import '../styles/glide.theme.min.css';
  1. Absolute URL Path: If your CSS file lives inside of public/, and you prefer to create your HTML link element yourself, you can reference any file inside of the public/ directory by absolute URL path in your component template. However, this approach skips the CSS processing, bundling, and optimizations that are provided by Astro when you use the import method. Here's an example:
<link rel="stylesheet" href="/styles/glide.core.min.css">
<link rel="stylesheet" href="/styles/glide.theme.min.css">

In your case, if the stylesheets are in the src/styles/ directory, you should use the ESM import method. If they are in the public/styles/ directory, you should use the absolute URL path method.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: