在 NETTE 框架中如何以及在何处包含 CSS 和 JS 文件？答案

【问题标题】：How and where to include CSS and JS file in NETTE framework?在 NETTE 框架中如何以及在何处包含 CSS 和 JS 文件？
【发布时间】：2023-03-05 21:01:01
【问题描述】：

当我使用传统的添加外部文件的方式时，我遇到了在 Nette 中将外部文件添加到模板的问题。要么我将这些链接添加到不正确的文件（模板不是应该添加它们的地方），要么使用的格式不正确。

我尝试在模板（拿铁咖啡）内部实现 css 和 js，效果很好。但是我需要将它们添加到外部。

{block script}
  <link rel="stylesheet" type="text/css" href="..\sass\components\file.scss">
  <script src="..www\assets\js\file.js"></script>
{/block script}

【问题讨论】：

给定的代码有什么问题？您是否考虑过为这些文件使用外部路径？您确定要在浏览器中加载 SCSS 文件吗？

标签： javascript php css nette

【解决方案1】：

您应该了解，服务器文件系统上的路径独立于您将在模板中发送到浏览器的 URL，以及浏览器将用于进一步 HTTP 请求的 URL。

例如，在使用 Nette 应用程序的常见场景中，/ 中的文件将在 /path/to/your/project/directory/www 下搜索；某些文件系统路径（例如 www 目录之外的所有内容）甚至没有对应的 URL。

默认情况下，Latte 不知道哪个文件与哪个 URL 匹配，因此它会保持 src 和 href 属性与写入完全相同。这意味着您需要确保自己使用正确的 URL。

为方便起见，Nette 会在 Latte 模板中自动设置 $basePath 变量：

{block script}

  <link rel="stylesheet" type="text/x-scss" href="{$basePath}/sass/components/file.scss">

  <script src="{$basePath}/assets/js/file.js"></script>

{/block script}

该变量将指向您的应用程序的公共根目录（www/ 目录），从而更容易找到 URL。

另外请注意，您应该在 URL 中使用正斜杠，并且您可能希望链接到已构建的样式表而不是 SASS 组件。

【讨论】：