How to load all css under a folder without providing css file name

Question

Is it possible to somehow automatically download all CSS files under a directory and its subdirectory without providing actual css file names

I have many css files, more specifically 12. All are under a directory styles and its subdirectories (only 1 level of subdirectories).

Following syntax doesn’t work to load all css

<link href='https://xxx/styles/*/*.css' rel='stylesheet' type='text/css’/>

Is there a workaround to load all css or I’ve to add 12 lines in HTML to download these.

NOTE: I’m ok to tradeoff performance for maintenance, and to have 12 different request instead of one. Its my personal webite and files are hosted from ny GitHub Pages.So I can not do any post processing to convert all file into one.

Lucas · Accepted Answer · 2022-04-15 22:56:55Z

1

If you do not mind having multiple requests to the server, you can create a main CSS file and inside it add @import to the other files.

main.css

@import url('/css/file_one.css');
@import url('/css/file_two.css');
@import url('/css/dir/file_one.css');

And in your HTML file

<link rel="stylesheet" href="/css/main.css" />

Just do not remember if in import need to add the complete URL.

answered Apr 15, 2022 at 22:56

Lucas

4526 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load all css under a folder without providing css file name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related