skip to Main Content

I’m using Astro JS to build a google chrome extension, and I have a problem when using tailwind.

Apparently Astro adds the CSS files to an _astro folder in the dist but this causes conflicts with Google due to:

Filenames starting with "_" are reserved for use by the system.
Could not load manifest.

If I manually change the name of the folder and the link to it in the index.html file it works, but it’s a pain to be doing this every time.

  • Is it possible to change the name of this folder in some astro config?
  • If it isn’t, how could I automate this process for every build?

2

Answers


  1. Chosen as BEST ANSWER

    I ended up creating a bash script to update the folder and the index file. It's not the cleanest way but I wanted it to be verbose and understandable.

    #!/bin/bash
    DIST_PATH=./dist
    DEFAULT_DIST_ASTRO_FOLDER=_astro
    NEW_ASTRO_FOLDER=astro
    INDEX_FILE=index.html
    
    echo "Moving '$DEFAULT_DIST_ASTRO_FOLDER' folder to '$NEW_ASTRO_FOLDER' folder"
    mv $DIST_PATH/$DEFAULT_DIST_ASTRO_FOLDER $DIST_PATH/$NEW_ASTRO_FOLDER
    
    echo "Upading references to '$DEFAULT_DIST_ASTRO_FOLDER' folder in '$INDEX_FILE'"
    UPDATE_REGEX="s//$DEFAULT_DIST_ASTRO_FOLDER///$NEW_ASTRO_FOLDER//g"
    sed -i -e $UPDATE_REGEX $DIST_PATH/$INDEX_FILE
    

  2. You can configure the assets folder in astro.config

    defineConfig({ build: { assets: 'custom-folder' } });

    The above will generate a /custom-folder containing your assets inside your dist folder

    https://docs.astro.build/en/reference/configuration-reference/#buildassets

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search