Question

你好天才程序员。你能帮我把所有的css文件合并到一个文件中吗？

   <link type='text/css' rel='stylesheet' href='css/header.css' />
    <link type='text/css' rel='stylesheet' href='css/body.css' />
    <link type='text/css' rel='stylesheet' href='css/sidebar.css' />
    <link type='text/css' rel='stylesheet' href='css/footer.css' />

我想将所有css文件合并为一个。例如：

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

Answer 1

您可以在PHP中轻松完成。一种非常正式的做法和包括方法就是这样。他们中的大多数人都在单独跟进这个方法。

创建一个名为styling.php的PHP文件，您可以将所有css文件包含到该PHP文件中，然后将其包含在您的文件中。

<强> styling.php

在此文件下，您可以拥有以下代码。

<link type='text/css' rel='stylesheet' href='css/header.css' />
<link type='text/css' rel='stylesheet' href='css/body.css' />
<link type='text/css' rel='stylesheet' href='css/sidebar.css' />
<link type='text/css' rel='stylesheet' href='css/footer.css' />

在PHP文件中，您可以在include()

的帮助下这样调用

include() - include语句包含并评估指定的文件。

根据给定的文件路径包含文件，如果没有给出，则指定include_path。如果在include_path中找不到该文件，include将最终在失败前检入调用脚本自己的目录和当前工作目录。如果找不到文件，include构造将发出警告;这与require的行为不同，会发出致命的错误。

如果定义了一个路径 - 无论是绝对路径（从Windows上的驱动器号或者\或Unix / Linux系统上的/开始）还是相对于当前目录（以。或..开头） - include_path将被忽略共。例如，如果文件名以../开头，则解析器将查找父目录以查找所请求的文件。

include()只会产生警告（E_WARNING），脚本将继续

<html>
<head>
<?php include('styling.php'); ?>
</head>
<body>
</body>
</html>

当您查看pagesource时，它将分别显示所有链接。

了解include()

以了解更多内容

解决方案一：

<强> vars.php

<?php
$color = 'green';
$fruit = 'apple';
?>

<强> test.php的

<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>

解决方案二

假设我们有一个名为＆＃34; footer.php＆＃34;的标准页脚文件，如下所示：

<?php
echo "<p>Copyright &copy; 1999-" . date("Y") . " W3Schools.com</p>";
?>

要在页面中包含页脚文件，请使用include语句：

<html>
<body>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>

希望你能用我的解释更好地理解。

Answer 2

一种粗略的'n'准备方式，你可以将所有样式表组合成一个就是创建一个像下面这样的PHP脚本，并在加载样式集时在html中使用它。

<?php

    /* all.php */

    header( 'Content-Type: text/css' );

    $css=array( '/css/header.css', '/css/body.css', '/css/sidebar.css', '/css/footer.css' );
    $output=array();

    foreach( $css as $file ){
        $output[]=file_exists( $file ) ? file_get_contents( $file ) : '/* error: '.$file.' cannot be found */';
    }
    echo implode( PHP_EOL, $output );


?>

在html中，包含php文件而不是.css文件

<link rel='stylesheet' href='/css/all.php' />

Answer 3

在JavaScript中，有一些解决方案可以自动运行这些任务。您可以安装Gulp或任何其他tasks runner，专门用于CSS连接这些包gulp-concat-css。

安装：

zingchart.render({
    id:{'chartDiv1','chartDiv2','chartDiv3','chartDiv4'},
    data:{myChart1,myChart2,myChart3,myChart4},
    height:300,
    width:500
  });

安装完成后，您可以在$ npm install --save-dev gulp-concat-css上添加任务：

gulpfile.js

执行：

var gulp = require('gulp'),
    concatCss = require('gulp-concat-css');

gulp.task('default', function() {
    return gulp.src('css/**/*.css')
        .pipe(concatCss('css/all.css'))
        .pipe(gulp.dest('dist/'));
});

比你的html看起来像这样：

$ gulp

将所有css文件合并到一个文件中

3 个答案: