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

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.

CodePudding user response：

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.