头文件中的 CSS/less 仅适用于索引页面答案

【问题标题】：CSS/less from header file only works on the index page头文件中的 CSS/less 仅适用于索引页面
【发布时间】：2021-05-10 21:50:34
【问题描述】：

欢迎来到我的第一篇文章。我已经搜索了一个小时的 stackoverflow 以找到我需要的 awnser，但没有成功。

我目前正在创建自己的网站来使用 processwire 和 bootstrap 测试 php。一般来说，我对编程很陌生，但我只有三周的 php/processwire 经验。我之所以使用它是因为我在他们使用它的地方实习过，我想在业余时间创建自己的项目以加快学习过程。

我正在使用在每个模板中导入的单独的页眉/页脚文件。我注意到我在头文件中导入的 CSS 仅适用于我的 home.php 模板，而不适用于我的其他模板。标头中的 html/php 工作正常，只是 css 不工作。

我的文件：

网站
资产
- 少
  - styles.less
模板
- _包括
  - _head.php
  - _foot.php
- home.php
- 基本页面.php

我试过了：

改为css而不是less
使用 ../ 而不是 site/ 更改 css 导入
将home.php的所有内容复制到basic-page.php中看看是否问题出在模板中。

部分标题：

    <?php namespace ProcessWire; ?>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      
      <title><?php echo $page->title; ?></title>
      <meta name="description" content="<?php echo $page->summary; ?>" />
      <!-- MDB icon -->
      <!--  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">  -->
          
    
      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
      <!-- Google Fonts Roboto -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
      <!-- Google Fonts -->
      <link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
      <!-- Bootstrap core CSS -->
      <link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/bootstrap.min.css" />
      <!-- Material Design Bootstrap -->
      <link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/mdb.min.css" />
      <!-- Your custom styles (optional) -->
      <link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
      
    
    
    </head>

<body>

页脚部分

    </footer>
    <!--/.Footer-->
    
    
    <!-- End your project here-->

    <!-- jQuery -->
    <script type="text/javascript" src="site/assets/js/jquery.min.js"></script>
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    
    

    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="site/assets/js/popper.min.js"></script>
    
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="site/assets/js/bootstrap.min.js"></script>
    
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="site/assets/js/mdb.min.js"></script>
    
    <!-- Your custom scripts (optional) -->
    <script type="text/javascript" src="site/assets/js/main.js" ></script>

    <!-- Import less file -->
    <script type="text/javascript" src="/site/assets/js/less.js" ></script>
    
    
    
    

</body>
</html>

模板主页.php

<?php include('./_includes/_head.php'); // include header markup ?>

    <main>
        
      
        <!--Main layout-->
        <div class="container">
            <!--First row-->
    
            <!--/.First row-->
      
            <hr class="extra-margins">
      
            <!--Second row-->
            <div class="row">
                

                    <!--Test columnn-->
                    <div class="col-lg-4">
                        <!--Card-->
                        <div class="card wow fadeIn" data-wow-delay="0.2s">
                            <!--Card image-->
                            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
                            <!--Card content-->
                            <div class="card-body">
                                <!--Title-->
                                <h4 class="card-title">This is title</h4>
                                <!--Text-->
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-info">Read more</a>
                            </div>
                        </div>
                        <!--/.Card-->
                    </div>

                    <!--Test columnn-->
                
                <!--First columnn-->
                <div class="col-lg-4">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.2s">
                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">This is title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-info">Read more</a>
                        </div>
                    </div>
                    <!--/.Card-->
                </div>
                <!--First columnn-->
      
                <!--Second columnn-->
                <div class="col-lg-4">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.4s">
                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(1).jpg" alt="Card image cap">
                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">This is title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-info">Read more</a>
                        </div>
                    </div>
                    <!--/.Card-->
                </div>
                <!--Second columnn-->
      
                <!--Third columnn-->
                <div class="col-lg-4">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.6s">
                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(4).jpg" alt="Card image cap">
      
                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">This is title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-info">Read more</a>
                        </div>
                    </div>
                    <!--/.Card-->
                </div>
                <!--Third columnn-->
                    
            </div>
            <!--/.Second row-->
        </div>
        <!--/.Main layout-->
      
    </main> 
    

<?php include('./_includes/_foot.php'); // include footer markup ?>

模板基本页面.php

<?php include('./_includes/_head.php'); // include header markup ?>
    
    <main>
        
      
        <!--Main layout-->
        <div class="container">
            <!--First row-->
    
            <!--/.First row-->
      
            <hr class="extra-margins">
      
            <!--Second row-->
            <div class="row">
                
    
                    <!--Test columnn-->
                    <div class="col-lg-4">
                        <!--Card-->
                        <div class="card wow fadeIn" data-wow-delay="0.2s">
                            <!--Card image-->
                            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
                            <!--Card content-->
                            <div class="card-body">
                                <!--Title-->
                                <h4 class="card-title">This is title</h4>
                                <!--Text-->
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-info">Read more</a>
                            </div>
                        </div>
                        <!--/.Card-->
                    </div>
    
                    <!--Test columnn-->
                
                <!--First columnn-->
                <div class="col-lg-4">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.2s">
                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">This is title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-info">Read more</a>
                        </div>
                    </div>
                    <!--/.Card-->
                </div>
                <!--First columnn-->
      
                <!--Second columnn-->
                <div class="col-lg-4">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.4s">
                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(1).jpg" alt="Card image cap">
                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">This is title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-info">Read more</a>
                        </div>
                    </div>
                    <!--/.Card-->
                </div>
                <!--Second columnn-->
      
                <!--Third columnn-->
                <div class="col-lg-4">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.6s">
                        <!--Card image-->
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(4).jpg" alt="Card image cap">
      
                        <!--Card content-->
                        <div class="card-body">
                            <!--Title-->
                            <h4 class="card-title">This is title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-info">Read more</a>
                        </div>
                    </div>
                    <!--/.Card-->
                </div>
                <!--Third columnn-->
                    
            </div>
            <!--/.Second row-->
        </div>
        <!--/.Main layout-->
      
    </main> 


<?php include('./_includes/_foot.php'); // include footer markup ?>

感谢您抽出宝贵时间阅读本文。任何帮助表示赞赏。

【问题讨论】：

标签： php css bootstrap-4 less processwire

【解决方案1】：

而不是这个

<?php namespace ProcessWire; ?>
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      
      <title><?php echo $page->title; ?></title>
      <meta name="description" content="<?php echo $page->summary; ?>" />
      <!-- MDB icon -->
      <!--  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">  -->
          
    
      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
      <!-- Google Fonts Roboto -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
      <!-- Google Fonts -->
      <link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
      <!-- Bootstrap core CSS -->
      <link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/bootstrap.min.css" />
      <!-- Material Design Bootstrap -->
      <link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/mdb.min.css" />
      <!-- Your custom styles (optional) -->
      <link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
    </head>
    <body>

改变

<link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />

到

<?php include 'site/assets/less/styles.less'; ?>

应该可以，并确保你有

<?php include '/path/to/header.php'; ?>

在你所有的文件中，至少对我有用。

【讨论】：

这行得通，我很震惊atm。主要是因为链接方法似乎确实适用于另一个项目。也许有一个插件在玩什么的。谢谢你的帮助，我真的很感激。