用 php 将我的 css 文件合并到一个主 css 文件中

Question

我想知道是否有人可以帮助我。我有许多不同的 css 文件，所以我对自己有一个很好的概述。我想知道我是否可以使用 php 自动将所有这些 css 文件合并到一个大的 main-css.css 文件中。作为临时解决方案，我在 index.php 中使用了<?php foreach (glob("css/*.php") as $css) {echo "<link type='text/css' rel='stylesheet' href='$css'>\n";}?>。这将获取我所有的 css 文件并在我的 index.php 文件的标题中回显它们。我读过最好有一个主css文件，这样网站运行得更快，这是真的吗？如果是这样，自动合并我的所有 css 文件的好方法是什么？所以我只需要使用<link type='text/css' rel='stylesheet' href='main-css.php'>。

index.php 文件的当前输出：

<link type='text/css' rel='stylesheet' href='css/reset/reset.css'>

<link type='text/css' rel='stylesheet' href='css/banner-style.php'>
<link type='text/css' rel='stylesheet' href='css/button-style.php'>
<link type='text/css' rel='stylesheet' href='css/cookie-style.php'>
<link type='text/css' rel='stylesheet' href='css/credits-style.php'>
<link type='text/css' rel='stylesheet' href='css/font-style.php'>
<link type='text/css' rel='stylesheet' href='css/form-style.php'>
<link type='text/css' rel='stylesheet' href='css/header-style.php'>
<link type='text/css' rel='stylesheet' href='css/html&body-style.php'>
<link type='text/css' rel='stylesheet' href='css/preloader-style.php'>
<link type='text/css' rel='stylesheet' href='css/price-tag-style.php'>
<link type='text/css' rel='stylesheet' href='css/scroll-top-style.php'>
<link type='text/css' rel='stylesheet' href='css/scrollbar-style.php'>
<link type='text/css' rel='stylesheet' href='css/section-style.php'>
<link type='text/css' rel='stylesheet' href='css/selection-style.php'>
<link type='text/css' rel='stylesheet' href='css/tooltip-style.php'>
<link type='text/css' rel='stylesheet' href='css/wrapper-style.php'> etc...

index.php 文件的预期输出：

<link type='text/css' rel='stylesheet' href='css/reset/reset.css'>
<link type='text/css' rel='stylesheet' href='css/main-css.php'> <!--All css files combined-->

当前css文件示例：

<?php  
    header('Content-type: text/css; charset: UTF-8');
    include 'variables/variables.php'; 
?>

/* ======================================================
    ► HEADER
   ====================================================== */

#header{
    height: <?= $headerHeight; ?>;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-color: <?= $headerBackgroundColor; ?>;
    border-bottom: <?= $headerBorder; ?>;
    box-shadow: <?= $headerShadow; ?>;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all 0.2s;
    box-sizing: inherit;
}

#header-wrapper{
    width: 100%;
    height: 100%;
    max-width: <?= $headerWrapperWidth; ?>;
    margin: 0 auto;
}

#header-container{
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    height: 100%;
    width: 100%;
    box-sizing: inherit;
    padding: <?= $headerPadding; ?>; 
    transition: all 0.2s;
}

@media only screen and (max-width: 960px){

    #header-container{
        padding: <?= $headerPaddingMob; ?>;
    }

    #header{
        height: <?= $headerHeightMob; ?>;
    }
}

Answer 1

将此作为新脚本的内容

<?php 
$realList=glob("css/*.php"); // or whatever it really is as for server real path will be needed
foreach ($realList as $css) {
  readfile($css); //in case if you want to write that as text
  // OR
  require_once($css); //in case if you want to load those as scripts
}
?>