[英]Combine my css files into one main css file with php
I was wondering if someone could help me out.我想知道是否有人可以帮助我。 I have many different css files so I have a nice overview for myself.
我有许多不同的 css 文件,所以我对自己有一个很好的概述。 I was wondering if I could automatically combine all these css files into one big main-css.css file with php.
我想知道我是否可以自动将所有这些 css 文件合并到一个带有 php 的大型 main-css.css 文件中。 As a temporary solution I have used
<?php foreach (glob("css/*.php") as $css) {echo "<link type='text/css' rel='stylesheet' href='$css'>\n";}?>
in my index.php.作为临时解决方案,我使用了
<?php foreach (glob("css/*.php") as $css) {echo "<link type='text/css' rel='stylesheet' href='$css'>\n";}?>
在我的索引中。php。 This will take all my css files and echo them in the header of my index.php file.这将占用我所有的 css 文件并在我的 index.php 文件的 header 中回显它们。 I have read that it is better to have one main css file so the website will run faster, is this true?
我读过最好有一个主要的 css 文件,这样网站运行速度会更快,这是真的吗? If so, what is a nice way to automate the merging of all my css files?
如果是这样,自动合并我的所有 css 文件的好方法是什么? So that I only have to use
<link type='text/css' rel='stylesheet' href='main-css.php'>
.所以我只需要使用
<link type='text/css' rel='stylesheet' href='main-css.php'>
。
Current output on the index.php file:当前索引上的 output.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...
Expected output on the index.php file:索引上预期的 output.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-->
Example of a current css file:当前 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; ?>;
}
}
Put this as content of your new script将此作为新脚本的内容
<?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
}
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.