Question

当我继续添加到我的网站时，对于我添加的每个HTML文件，我需要包括

    <!-- Source for .css style rules -->
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>

<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>

它不是一个糟糕的方法，它每次都有效。我只知道必须有一个更简单的方法。

我知道，但这似乎不是最简单的方法。

我知道js库require.js，这很棒，但如果我不认为我可以将它用于我的CSS文件。

我想要的是一种引用一个文件，加载一个文件的方法，然后它有某种结构或代码，然后导入所有其他所需的CSS和JS文件。

让我看到我需要这种系统的原因是为bootstrap选择所有文件而不加载每个文件，就像我上面加载了我的CSS和JS一样。

我确定我错过了一些关键术语，所以请帮助我一起提出新的术语或想法，但我还没有找到能够描述的措辞。

Answer 1

对于CSS，始终有@import个语句。请参阅MDN上的@import

定义一个CSS文件并使用@import url("some-other.css")通过单数＆＃34; main＆＃34;加载所有CSS文件CSS文件。

对于CSS，您可以使用像LESS或SASS这样的CSS预处理器，通过构建步骤将所有文件捆绑到一个文件中。同样的原则也适用于JavaScript以及某种捆绑器，无论是{style（1）}用于require.js AMD样式应用程序还是Browserify用于更多CommonJS样式源文件。

Answer 2

引用索引中的一堆文件没有任何问题，但最好在部署到生产之前使用Gulp之类的东西构建应用程序。你的gulp进程应该将所有css和js组合成相应的缩小的css和js文件。这样做有很多性能上的好处。很抱歉这么简短

Answer 3

您还没有说出您的后端语言是什么，但如果您使用的是PHP，则可以执行以下操作：

<强>的index.php

<?php
    include 'inc/head.inc.php';
?>
<body>
    <div>All your stuff follows here</div>
    <?php include 'inc/nav.inc.php'; ?>

<强> INC / head.inc.php：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>MyDomain</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="some stuff I do" />
    <meta name="keywords" content="stuff, things, quality" />
    <meta name="robots" content="index,follow" />

    <link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
    <link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

    <!-- JavaScript for using a custom file for resources. -->
    <script src="/Hexdra/assets/scripts/angular.js"></script>
    <script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
    <script src="/Hexdra/assets/scripts/siteScript.js"></script>

    <!-- Angular Apps-->
    <script type="text/javascript" src="/Hexdra/app/tank.js"></script>
    <script type="text/javascript" src="/Hexdra/app/form.js"></script>

</head>

模块化地加载CSS和JS文件

3 个答案: